html导航栏制作横向
时间: 2023-08-31 14:09:09 浏览: 56
在 HTML 中,可以通过使用无序列表 `<ul>` 和列表项 `<li>` 来创建横向导航栏。具体步骤如下:
1. 创建一个无序列表 `<ul>`,并设置其样式为 `display: flex`,这样列表项会变成一行水平排列。
```
<ul style="display: flex;">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul>
```
2. 设置列表项 `<li>` 的样式为 `flex: 1`,这样每个列表项会占据相同的宽度。
```
<ul style="display: flex;">
<li style="flex: 1;"><a href="#">菜单1</a></li>
<li style="flex: 1;"><a href="#">菜单2</a></li>
<li style="flex: 1;"><a href="#">菜单3</a></li>
</ul>
```
3. 设置列表项中链接 `<a>` 的样式,例如设置字体大小、颜色、边距等。
```
<ul style="display: flex;">
<li style="flex: 1;"><a href="#" style="font-size: 16px; color: #333; margin: 0 10px;">菜单1</a></li>
<li style="flex: 1;"><a href="#" style="font-size: 16px; color: #333; margin: 0 10px;">菜单2</a></li>
<li style="flex: 1;"><a href="#" style="font-size: 16px; color: #333; margin: 0 10px;">菜单3</a></li>
</ul>
```
完整代码如下:
```
<ul style="display: flex;">
<li style="flex: 1;"><a href="#" style="font-size: 16px; color: #333; margin: 0 10px;">菜单1</a></li>
<li style="flex: 1;"><a href="#" style="font-size: 16px; color: #333; margin: 0 10px;">菜单2</a></li>
<li style="flex: 1;"><a href="#" style="font-size: 16px; color: #333; margin: 0 10px;">菜单3</a></li>
</ul>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)