可以使用 CSS 中的 display
和 float
属性来控制导航栏中菜单的排列方式。
display
属性用于设置 HTML 元素的显示类型,常见的值包括:
block
:将元素显示为块级元素,独占一行;inline
:将元素显示为行内元素,不独占一行;inline-block
:将元素显示为行内块级元素,不独占一行,但可以设置宽度和高度等属性。float
属性用于设置元素的浮动方式,常见的值包括:
left
:元素向左浮动;right
:元素向右浮动;none
:元素不浮动。因此,我们可以通过设置菜单元素的 display
属性为 inline-block
,使其在一行中排列,并通过设置 float
属性来控制其相对位置,如下所示:
.nav-menu {
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li {
display: inline-block;
float: left;
margin-right: 10px;
}
.nav-menu li:last-child {
margin-right: 0;
}
上述代码中,我们将 .nav-menu
列表的 display
属性设置为 none
,将其内部的每个菜单项 (<li>
元素) 的 display
属性设置为 inline-block
,并将其向左浮动 (float: left
),同时给每个菜单项设置一个右边距 (margin-right
),最后通过 :last-child
伪类选择器将最后一个菜单项的右边距设置为 0,以避免多余的间距。