我有一个包含页眉，页脚，正文内容的布局。这是一个非常标准的布局。我们的报告有时会超出硬编码宽度”，但我们需要将左侧导航栏和正文内容保留在同一行。使用下面的HTML代码，如果宽度扩展得太远（例如，主体中的某个内容的宽度超过900+），则主体内容将在左侧导航下方流动。
基本上，我们希望该内容和左侧导航保留在同一行上，而不管该正文内容部分中实际有多少内容。有没有一种方法可以强制浏览器始终将这些内容保留在同一行中。
<html>
<head>
<title>Test</title>
<style type="text/css">
#bodyFull {
}
#header {
border: 3px solid #f00;
background-color: #99F;
width: 900px;
}
#footer {
border: 3px solid #909;
background-color: #F99;
width: 900px;
}
#leftNav {
float: left;
width: 150px;
height: 800px;
border: 2px solid #777;
background-color: #FF9;
}
#bodyContent {
float: left;
border: 2px solid #707;
background-color: #AAA;
width: 1024px;
height: 1024px;
overflow: hidden
}
#mainBody {
width: 920px;
}
</style>
</head>
<body>
<div id="bodyFull">
<div id="header">
The Header
</div>
<div id="mainBody">
<div id="leftNav">
Left Nav
</div>
<div id="bodyContent">
The Body
</div>
The End of Main Body
</div>
<div style="clear: both"></div>
<div id="footer">
The Footer
</div>
</div>
</body>
</html>
小错别字：bodyContent与leftNav位于同一行。
/ * !!!此部分可以像左侧导航条一样保留在同一行上吗，即使它扩展了“ Header / BODYFULL”宽度
* /
最佳答案
好吧，忘记我的margin-left建议，误解了这个问题。如果您要确保div始终为750px（这样，加上左侧导航与标题相同的宽度），则将其宽度设置为750px，并设置overflow: auto来在该部分添加滚动条页面（如果需要），或点击overflow: hidden截断它。
关于html - HTML布局，正文内容超出设置的宽度并保持在同一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1109528/