在两端水平对齐内容/导航,不使用flexbox或文本-对齐对齐的方法有多种,以下是其中几种常见的方法:
<style>
.container {
overflow: hidden; /* 清除浮动 */
}
.item {
float: left; /* 左浮动 */
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<style>
.container {
font-size: 0; /* 消除行内块元素间的空白间隙 */
}
.item {
display: inline-block; /* 行内块元素 */
vertical-align: top; /* 顶部对齐 */
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<style>
.container {
display: table; /* 表格布局 */
width: 100%; /* 宽度100% */
}
.item {
display: table-cell; /* 表格单元格 */
text-align: center; /* 居中对齐 */
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
这些方法都可以实现在两端水平对齐内容/导航的效果,具体选择哪种方法取决于具体的需求和布局。
领取专属 10元无门槛券
手把手带您无忧上云