css 制作横向菜单

使用 CSS 制作横向菜单

方法一：使用 display: inline-block

将菜单项的 display 属性设置为 inline-block，使其水平排列。

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f0f0f0;
}

.nav-menu li {
    display: inline-block;
    margin-right: 10px;
}

.nav-menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.nav-menu li a:hover {
    background: #ddd;
}

<ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
</ul>

方法二：使用 float: left

通过浮动使菜单项横向排列，注意清除浮动以避免布局问题。

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f0f0f0;
    overflow: hidden; /* 清除浮动 */
}

.nav-menu li {
    float: left;
    margin-right: 10px;
}

.nav-menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.nav-menu li a:hover {
    background: #ddd;
}

方法三：使用 Flexbox

Flexbox 提供了更灵活的布局方式，适合现代浏览器。

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f0f0f0;
    display: flex;
}

.nav-menu li {
    margin-right: 10px;
}

.nav-menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.nav-menu li a:hover {
    background: #ddd;
}

方法四：使用 Grid

CSS Grid 适用于更复杂的布局需求。

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f0f0f0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.nav-menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    text-align: center;
}

.nav-menu li a:hover {
    background: #ddd;
}

注意事项

• 确保菜单项之间有适当的间距，避免拥挤。
• 使用 text-align: center 可使菜单文字居中显示。
• 移动端适配时，可能需要调整布局为垂直排列或使用响应式设计。