gpt4 book ai didi

html - 子元素的宽度或高度在 CSS 中不会改变

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

这是我的 DOM:

<html>
<body>
<table>
<tr>
<td>
hello
</td>
</tr>
</table>
</body>
</html>

和我的 CSS:

    html, body {
height: 100%;
width: 100%;
}
table {
height: 100%;
width: 100%;
}
td {
border: 1px solid gray;
height: 10%;
width: 10;
}

我想做的是使用百分比重新调整 TD 元素的高度和宽度。但是这段代码不起作用。我知道子元素的大小将继承其父元素的大小。所以 TD 将从 TABLE 继承大小,然后从 BODYHTML 继承 TABLE父元素。我的代码不这样做。但是,如果我在 TABLE 上执行 width: 10%;,那么它将获得 BODY/HTML 元素宽度的 10%。与 height: 10% 相同。但为什么它在 TD 标签上不起作用?

最佳答案

td 标签被迫占据其父标签中的所有剩余空间。

因此,您的 width: 10%; 完全被布局忽略了。

看到这个无效的 JSFiddle Demo .

但是,如果我们在 td 中添加一些 display: inline-block;,那么问题就解决了。

看到这个(现在)工作 JSFiddle Demo .

关于html - 子元素的宽度或高度在 CSS 中不会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20877011/

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