内容div需要溢出宽度,但顶部div中会出现间隙。
请运行代码段并向右滚动,您会注意到顶部div上的差距
#header {
background: red;
}
#content {
white-space: nowrap;
}

<div id="header">
<p>HEADER</p>
</div>
<div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>
&#13;
如何填写标题div上的空白?
答案 0 :(得分:1)
我认为这很不可能。你可以使用的是overflow:scroll,它会将滚动条添加到大元素
#header {
background: red;
}
#content {
white-space: nowrap;
overflow-x:scroll;
}
&#13;
<div id="header">
<p>HEADER</p>
</div>
<div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>
&#13;
编辑:这是另一个片段应该做的诀窍: display:inline-block将宽度调整为最大的子元素
#header {
background: red;
}
#content {
white-space: nowrap;
}
.container {
display:inline-block;
}
&#13;
<div class="container">
<div id="header">
<p>HEADER</p>
</div>
<div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>
</div>
&#13;
答案 1 :(得分:0)
如果您可以使用您的设计,只需将标题div放入溢出的div并使其自动调整:
HTML:
<div id="content">
<div id="header">
<p>HEADER</p>
</div>
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT
</div>
CSS:
#header {
left:0px;
right:0px;
top:0px;
background: red;
}
#content {
width:1000px;
white-space: nowrap;
}
https://jsfiddle.net/p7m8wg48/
或制作包装:
HTML:
<div id="bodyClass">
<div id="header">
<p>HEADER</p>
</div>
<div id="content">
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT
</div>
</div>
CSS:
#bodyClass{
width:1000px;
}
#header {
left:0px;
right:0px;
top:0px;
background: red;
}
#content {
white-space: nowrap;
}
https://jsfiddle.net/dLmt1Ley/
编辑:
RE:In your first suggestion, why did you put a fixed width? If I removed the fixed width the gap returns.
这是因为您无法将填充设置为元素的未定义边缘。宽度固定在类似before
的状态。溢出的内容调整实际宽度,但需要设置。