使用CSS overflow属性实现：
我们可以使用一点 CSS 强制 HTML <div> 元素的内容保持在同一行。
使用 overflow 属性，以及设置为“nowrap”的 white-space 属性。
强制 <div> 元素的内容保持在同一行的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 1px solid #000;
width: 60px;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
在下一个示例中，我们使用三个浮动且具有固定宽度的元素（<div>、<ul> 和 <li>）。
子包装器设置为大于父级的宽度，以允许子元素在同一行上水平浮动。
强制 <div> 元素的浮动内容保持在同一行的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#parent {
width: 300px;
height: 90px;
background-color: #666;
overflow-x: auto;
overflow-y: hidden;
}
#childWrapper {
list-style: none;
width: 450px;
height: 80px;
margin: 0;
padding: 0;
overflow: hidden;
}
#childWrapper > li {
float: left;
width: 150px;
height: 80px;
background-color: #55c974;
}
#childWrapper > li:nth-child(even) {
background-color: #d4ffdd;
}
</style>
</head>
<body>
<div id="parent">
<ul id="childWrapper">
<li>Box 1</li>
<li>Box 2</li>
<li>Box 3</li>
</ul>
</div>
</body>
</html>
日期：2020-06-02 22:15:09 来源：oir作者：oir