gpt4 book ai didi

html - 流体子元素 1px 太宽,但只有一个地方

转载 作者:太空宇宙 更新时间:2023-11-04 14:46:06 24 4
gpt4 key购买 nike

http://jsfiddle.net/Yn7e7

由于某些原因,“.ep”div 的 1 个像素太宽仅在“.heading”容器中,导致标题流到下一行。对于通过 php 动态生成的内容,我将其放入“#contents”div 并具有与“.heading”div 完全相同的结构/使用完全相同的 CSS,它可以正确显示。我什至用 W3C 验证了我的 HTML/CSS。给了什么?

有关更强大的示例,请参阅我正在处理的元素,找到 here .

代码(对于那些不想点击的人)在下面找到。

HTML:

<body>
<div class="container">
<div class="container toolbar">
<div class="search"></div>
</div>
<div class="container heading">
<div class="sid"><p>Show ID</p></div>
<div class="network"><p>Network</p></div>
<div class="title"><p>Title</p></div>
<div class="ep"><p>Episode</p></div>
</div>
<div id="contents">
<div id="loading" style="display: none">
<img src="assets/img/loading.gif" alt="loading" />
</div>
</div>
</div>
</body>

CSS:

html, body {
min-height: 100%;
}
body {
font-family: 'Open Sans', helvetica, arial, sans-serif;
}
.container p {
margin: 0;
}
#contents {
margin-top: 8em;
}
#contents #loading {
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
}
.toolbar {
position: fixed;
top: 0;
background: #ccc;
color: #000;
margin: 0;
line-height: 5em;
}
.toolbar > div {
display: inline-block;
padding: 0;
margin: 0;
}
.heading {
position: fixed;
top: 5em;
font-weight: bold;
background: #00f;
color: #fff;
margin: 0;
}
.heading > div {
display: inline-block;
padding: 0;
margin: 0;
}
.heading p {
padding: 0;
line-height: 3em;
}
.sid {
width: 10%;
}
.network {
width: 25%;
}
.title {
width: 50%;
}
.ep {
width: 15%;
}

最佳答案

问题是标题子 div 上的内联 block 。 inline-block 将元素显示为内联元素,但保留了 block 级元素的一些定位功能。这意味着空白被视为内联元素中的空白,因此每个 div 之间的换行符被呈现为空格并丢弃宽度。

去除空白或使用 float 代替行内 block 。

关于html - 流体子元素 1px 太宽,但只有一个地方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17844127/

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