Question

我需要一些CSS样式的帮助。

我创建了一个包含2行和2列的表，但是第一行中的第一列的行数为2.这样就创建了一个这样的表：http://i.imgur.com/UjdSwu5.png，这很好。

我的问题是，当我尝试将填充应用于'name'和'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 cell将按照我想要的方式填充，但它也会填充img单元格。

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

我做错了什么？

Answer 1

您只是将填充应用于错误的元素。

您正在为h3内的p和#content td元素应用填充，但您真正想要做的是将填充应用于单元格是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已经说过的那样，你将填充应用于错误的元素 - 这很容易发生，当你以这种方式对待元素时 - 很难阅读。

每当您更改HTML结构时，您都必须关心css并更新它。因此，我真的不建议将所有html-tree放在css中以达到正确的元素。

CSS表填充问题

2 个答案: