html+css实现行内对齐的4种方法
我们通过制作导航的形式，来体验4种对齐方式。
分别是
display: flex;
display: inline-block;
float: left;
display: grid;
为了让效果更佳直观，我们配置下公共css代码（less写法）
// 设置body元素的外边距为0，消除浏览器默认样式的影响
body {
margin: 0;
}
// 去除所有ul元素的列表符号样式
ul {
list-style: none;
}
// 设置所有a元素去除下划线（默认链接样式）
a {
text-decoration: none;
}
// 定义一个id为"nav"的元素样式
#nav {
// 在.nav1内部定义.row类样式
.row {
// 设置.row容器宽度为1200px，并通过自动设置左右内边距使其水平居中显示
width: 1200px;
margin: 0 auto;
/* 使用媒体查询，在屏幕宽度小于等于960px时应用以下样式 */
@media(max-width: 960px) {
// 将.row类容器的宽度设置为100%，以适应小屏幕自适应布局
width: 100%;
}
}
ul {
// 移除默认外边距和内边距
margin: 0;
padding: 0;
// 文本居中对齐
text-align: center;
// 在ul内部定义li元素样式
li {
// 设置行高为50px以使文本垂直居中
line-height: 50px;
// 鼠标指针悬停时变为手形
cursor: pointer;
line-height: 50px;
// 在li内的a元素样式
a {
// 设置文字颜色为白色
color: #ffffff;
// 去除下划线
text-decoration: none;
// 设置字体加粗，权重为900
font-weight: 900;
display: block;
}
}
// 当鼠标悬停在li上或li具有.on类时应用的样式
li:hover,
.on {
// 背景颜色为rgba(0, 0, 0, 0.13)，即带有一定透明度的黑色
background: rgba(0, 0, 0, 0.13);
// 修改此时li内的a元素颜色为#ffea52（黄色）
a {
color: #ffea52;
}
}
}
// 针对"#nav"内的直接li子元素设置样式
li {
// 设置li元素为相对定位，以便其子元素（ul）可以进行绝对定位
position: relative;
// 在当前li元素下定义嵌套的ul子元素样式
ul {
// 将ul元素设置为绝对定位，并根据父级li元素定位
position: absolute;
// 设置ul元素距离左侧边界0像素
left: 0;
// 设置ul元素距离顶部50像素
top: 50px;
// 设置ul元素宽度为100%
width: 100%;
// 设置z-index值为6，使其在叠加上具有较高层级
z-index: 6;
// 初始化ul元素透明度为0，隐藏该元素
opacity: 0;
// 隐藏ul元素内容
visibility: hidden;
// 防止内容溢出
overflow: hidden;
// 添加过渡效果，当opacity属性改变时，会在0.8秒内完成变化
transition: opacity .8s;
}
// 对于当前li元素下的嵌套li子元素设置样式
li {
// 取消浮动
float: none;
// 设置嵌套li元素宽度为100%
width: 100%;
// 设置背景颜色为#C01E22（暗红色）
background-color: #C01E22;
// 在嵌套li元素内部的a元素样式
a {
// 设置链接文字颜色为白色
color: #fff;
}
}
// 当鼠标悬停在当前li元素上时，应用以下样式：
&:hover ul {
// 改变ul元素的透明度为1，使其可见
opacity: 1;
// 显示ul元素内容
visibility: visible;
// 设置display属性为block，确保ul显示为块状元素
display: block;
}
}
}一、display: flex;
又名弹性布局，是CSS3中的一个模块，为复杂的一维布局提供了更强大的解决方案，它于2009年开始标准化，并在后续几年里逐步被现代浏览器采纳和支持。Flexbox极大地简化了响应式布局设计、垂直居中对齐等问题。
<div class="nav1" id="nav"> <div class="row"> <ul> <li class="on"><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a> <ul> <li><a href="#">子目录</a></li> <li><a href="#">子目录</a></li> </ul> </li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul> </div> </div>
css代码（less写法）
// 定义一个名为.nav1的类样式，表示导航栏区域
.nav1 {
// 设置导航栏背景颜色为#008bc7（深蓝色）
background-color: #008bc7;
// 设置.nav1内的ul元素样式
ul {
// 使用Flex布局，允许子元素换行
display: flex;
flex-wrap: wrap;
// 在ul内部定义li元素样式
li {
// 每个li元素宽度为父容器宽度的20%
width: 20%;
/* 使用媒体查询，在屏幕宽度小于等于960px时调整li元素的宽度 */
@media(max-width: 960px) {
// 将每个li元素宽度调整为父容器宽度的33.33%
width: 33.33%;
}
}
}
}二、display: inline-block
结合了块级元素和行内元素的特点，使得元素既可以像块级元素那样设置宽高，又能像行内元素一样在同一行显示。2004年左右在CSS2.1规范中引入，其逐渐被浏览器支持并在Web开发中广泛应用，特别是在需要混合使用行内与块状表现的场景。
<div class="nav2" id="nav"> <div class="row"> <ul> <li class="on"><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a> <ul> <li><a href="#">子目录</a></li> </ul> </li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul> </div> </div>
css代码（less写法）
// 定义一个名为.nav2的类样式，表示第二个导航栏区域
.nav2 {
// 设置导航栏背景颜色为#00da91（绿色）
background-color: #00da91;
// 设置.nav2内的ul元素样式
ul {
// 设置字体大小为0以消除inline-block元素间的间距
font-size: 0;
// 在ul内部定义li元素样式
li {
// 每个li元素宽度为父容器宽度的20%
width: 20%;
// 设置行高为50px
line-height: 50px;
// 显示方式设为inline-block以便于控制布局
display: inline-block;
/* 使用媒体查询，在屏幕宽度小于等于960px时调整li元素的宽度 */
@media(max-width: 960px) {
// 将每个li元素宽度调整为父容器宽度的33.33%
width: 33.33%;
}
}
}
}三、float: left;
在CSS中主要用于浮动元素，最早用于文本环绕图片的排版，后来被广泛用于创建网页的多列布局。该属性的历史可以追溯到CSS1规范（1996年）。
<div class="nav3" id="nav"> <div class="row"> <ul> <li class="on"><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a> <ul> <li><a href="#">子目录</a></li> </ul> </li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul> </div> </div>
css代码（less写法）
// 定义一个名为.nav3的类样式，表示第三个导航栏区域
.nav3 {
// 设置导航栏背景颜色为#004bd6（深蓝色）
background-color: #004bd6;
// 设置.nav3内的ul元素样式
ul {
/* 使用媒体查询，在屏幕宽度小于等于960px时调整ul高度和添加overflow属性 */
@media(max-width: 960px) {
// 当屏幕变小时，将ul的高度设为auto并隐藏溢出内容
height: auto;
overflow: hidden;
}
// 在ul内部定义li元素样式
li {
// 每个li元素宽度为父容器宽度的20%
width: 20%;
// 浮动方式设为left，以便于创建水平排列的导航菜单
float: left;
/* 使用媒体查询，在屏幕宽度小于等于960px时调整li元素的宽度 */
@media(max-width: 960px) {
// 将每个li元素宽度调整为父容器宽度的33.33%
width: 33.33%;
}
}
}
}四、display: grid;
又名网格布局，是CSS3中另一个重要布局模块，比Flexbox晚些时候引入。Grid布局提供了一个真正的二维布局系统，允许开发者轻松创建复杂的自适应网页布局。这个特性从2011年起开始标准化，并在2017年后得到了主要浏览器的广泛支持。
<div class="nav4" id="nav"> <div class="row"> <ul> <li class="on"><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a> <ul> <li><a href="#">子目录</a></li> </ul> </li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul> </div> </div>
css代码（less写法）
// 定义一个名为.nav4的类样式，表示第四个导航栏区域
.nav4 {
// 设置导航栏背景颜色为#008bc7（深蓝色）
background-color: #008bc7;
// 设置.nav4内的ul元素样式
ul {
// 使用CSS Grid布局，并设置初始情况下有5列（每列自适应宽度）
display: grid;
grid-template-columns: auto auto auto auto auto;
/* 使用媒体查询，在屏幕宽度小于等于960px时调整Grid布局列数 */
@media(max-width: 960px) {
// 当屏幕变小时，将Grid布局列数改为3列
grid-template-columns: auto auto auto;
}
}
}效果演示
文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。
文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。