gpt4 book ai didi

css - 为什么 LESS css 宽度会导致更多的视觉宽度?

转载 作者:行者123 更新时间:2023-11-28 14:11:42 38 4
gpt4 key购买 nike

我有一个这样的 html:

<!doctype html>
<head>
<style>
body { background-color: #eee; }

.container {
display: table;
border-spacing: 1.5em 0;
}

.cell {
display: table-cell;
background-color: orange;
border-radius: .5em;
padding: 1em;
width: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="cell">Left cell</div>
<div class="cell">#</div>
</div>
</body>

我对 width 属性感到困惑。值 10% 比值 50% 产生的视觉宽度更多。为什么?

注意:我故意遗漏了 .container 的 css width 属性,以便观察 CSS 如何/为什么这样做。

见下图:

enter image description here

######

enter image description here

######

enter image description here

最佳答案

问题是您的容器的 display: table 样式。将表格结构与其单元格的单独宽度属性混合使用是不明智的。因此,要么使用 div 布局,要么通过 containerstyle.width 属性控制单元格的宽度。请注意,典型的表格样式以其自己的方式保持其单元格的宽度比例。此外,我建议将 width 属性添加到您的 container。然后您可以使用 cellstyle.width 并亲眼看看 table 是如何工作的。

关于css - 为什么 LESS css 宽度会导致更多的视觉宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56392272/

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