CSS表格填充問題

Question

我需要一些CSS樣式方面的幫助。

我制作了一個包含2行2列的表格，但是第一行的第一列的行距為2。這將創建一個表格，如下所示： http : //i.imgur.com/UjdSwu5.png ，即精細。

我的問題是，當我嘗試將填充應用於“名稱”和“ id”單元格（而不是圖像單元格）時，僅填充名稱單元格。 這是不填充的屏幕截圖： http : //i.imgur.com/0CGVhDL.png ，這是我嘗試填充兩個單元格時的屏幕截圖： http : //i.imgur.com/ipvHv2M.png

HTML：

<div id="body">
  <div>
    <div>
      <div>
        <div id="content">
          <div id="items">
            <ul class="list">
              <li>
                <table border="0">
                  <tr>
                    <td rowspan="2"><a href="index.html"><img
                      src="images/Stone.png" alt="Image" height="50" width="50"></a>
                    </td>
                    <td>
                      <h3 class="name">Stone</h3>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p class="id">1</p>
                    </td>
                  </tr>
                </table>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

#content td h3 {
  padding:5px 1px 5px 30px;
}

#content td p {
  padding:5px 1px 5px 30px;
}

如果我執行以下操作，則id單元將被填充為我希望的樣子，但它也會填充img單元。

#content td {
  padding:5px 1px 5px 30px;
}

我究竟做錯了什么？

Answer 1

您只是將padding應用於錯誤的元素。

您正在p #content td的h3和p元素應用填充，但是您真正想要做的是將填充應用於td的單元格 。

為了正確執行此操作，您需要標識您的單元格，如下所示：

<td class="name">
  <h3>Stone</h3>
</td>

和

<td class="id">
    <p>1</p>
</td>

CSS應該是這樣的

#content td.name {
  padding:5px 1px 5px 30px;
}

#content td.id {
  padding:5px 1px 5px 30px;
}

同樣，一個好的做法是不要將一個類命名為id ，這以后可能會造成很大的混亂。

例如，我建議將其稱為item-id 。

<td class="item-id">
    <p>1</p>
</td>

#content td.item-id {
  padding:5px 1px 5px 30px;
}

Answer 2

首先，我建議使用元素的類名來設置它們的樣式。

這是應該執行您想要的工作的CSS：

.name, .id{
    padding: 80px;
}

在這個小提琴中，您可以看到一個有效的解決方案： http : //jsfiddle.net/63eUh/

正如Kevin Smouts已經說過的那樣，您將填充物應用於錯誤的Element上-當您以這種方式處理Elements時很容易發生這種情況-很難閱讀。

每當您更改HTML結構時，都必須關心CSS並對其進行更新。 因此，我真的不建議您將所有的html-tree放入CSS中以獲取正確的元素。