gpt4 book ai didi

html - CSS 表格填充问题

转载 作者:太空宇宙 更新时间:2023-11-03 21:44:31 25 4
gpt4 key购买 nike

我需要一些 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;
}

我做错了什么?

最佳答案

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

您正在对 #content td 中的 h3p 元素应用填充,但您真正想要做的是应用填充到单元格,即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;
}

此外,一个好的做法是不要将 class 命名为 id,这在之后可能会非常困惑。

例如,我建议改用 item-id

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

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

关于html - CSS 表格填充问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21347972/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com