横向导航栏css代码
时间: 2023-07-29 11:07:28 浏览: 51
以下是一个简单的横向导航栏的 CSS 代码示例:
```css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
height: 50px;
padding: 0 20px;
}
.navbar ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
margin: 0 10px;
}
.navbar a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
padding: 10px;
border-radius: 5px;
}
.navbar a:hover {
background-color: #fff;
color: #333;
}
```
在 HTML 中,可以使用以下代码创建一个基本的横向导航栏:
```html
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
```
你可以根据需要调整样式和 HTML 结构来满足你的需求。