极客笔记如何强制< Div>元素的内容保持在同一行上
< div>标签用于在网页中分组HTML元素，允许我们创建具有类似功能的不同部分，并可以使用Id或class属性轻松地进行样式设置。HTML的< div>是一个块级元素，默认情况下不显示其相邻的任何其他HTML元素。
Div是网页开发中最有用的标签，因为它允许我们在网页中分隔数据并为特定数据或功能创建特定的部分。它是成对使用的，内容写在开放（< div>）和闭合（</div>）标签之间。
示例
让我们来看一个示例，展示了在div元素中的内容包装。
<!DOCTYPE html>
<html>
<head>
<title>Content layout in a div tag</title>
<style>
div{
background-color:lightyellow;
}
</style>
</head>
<body>
<h3>There is a div element below this line</h3>
<div>
By default, the content wraps itself according to the dimensions of the element within which it is contained. Hence, the text does not get clipped, instead it moves to the next line.
</div>
</body>
</html>
正如我们所观察到的，根据浏览器宽度确定的div标签的宽度，内容会自动换行到下一行。
假设我们为div元素设置自定义宽度，比如250像素，内容会根据该宽度自动换行。
然而，我们可以更改默认设置，并使用下面讨论的某些CSS属性强制使
标签的内容在同一行水平显示。
使用溢出和空白属性
CSS overflow属性 指定当内容太大以至于无法适应容器并溢出边缘时会发生什么。也有一些较少使用的姐妹属性overflow-y和overflow-x。
overflow属性有四个选项：visible（默认值）、hidden、scroll和auto。我们可以将overflow属性设置为 “hidden” ，以防止内容渲染到元素边界之外。结果是，用户将无法滚动到盒子的填充边缘之外阅读内容，因为内容将被裁剪在那里。
CSS white-space属性
CSS white-space属性 控制空格序列的显示方式。它指定空格是否应该被折叠（合并成一个空格），以及行是否应该在行末换行。
white-space属性使用5个不同的关键字值进行设置：normal、pre、nowrap、pre-wrap和pre-line。当CSS white-space属性设置为 “nowrap” 时，任何两个或多个空格序列都显示为单个空格。除非明确指定，元素的内容不会换行到新行。
CSS float属性 用于定位。它用于将元素移动到左侧或右侧，以便其他元素可以环绕它。它最常与图像和布局一起使用。
示例
在下面的示例中，我们将overflow设置为 “hidden” ，并使用whitespace属性的 nowrap 值强制使div的内容保持在同一行。
<!DOCTYPE html>
<html>
<head>
<title>How to Force the Content of the <div> Element to Stay on the Same Line?</title>
<style>
div {
background-color:whitesmoke;
height:30px;
width:250px;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<div>This is an example of text clipping using the CSS overflow and white-space properties.</div>
</body>
</html>
使用浮动元素
在这个示例中，我们将使用三个具有固定宽度的浮动元素：div、ul和li。为了允许子组件在同一行上水平浮动，子包装器的宽度被设置为大于父元素的宽度。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to Force the Content of the <div> Element to Stay on the Same Line?</title>
<style>
#parent {
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
#childWrapper {
list-style: none;
width: 420px;
height: 100px;
margin: 0;
padding: 0;
overflow: hidden;
}
#childWrapper > li {
float: left;
width: 140px;
height: 100px;
background-color: thistle;
}
#childWrapper > li:nth-child(even) {
background-color: lavenderblush;
}
</style>
</head>
<body>
<div id="parent">
<ul id="childWrapper">
<li>111111111111111111111111</li>
<li>222222222222222222222222</li>
<li>333333333333333333333333</li>
</ul>
</div>
</body>
</html>