css横向导航菜单加边框

在网站构建中，水平菜单导航是非常普遍的。怎样让菜单导航看起来更漂亮呢？那就是添加边界。本文将分享（原文无明显近义词）怎样运用CSS来完成水平菜单导航加边界。

HTML代码如下：
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
CSS代码如下：
nav {
display: flex; /* 设置上级容器为Flex布局 */
justify-content: center; /* 子级项目中央对齐 */
background-color: #333; /* 背景色彩 */
padding: 10px; /* 内部间隔 */
}
ul {
display: flex; /* 设置下级容器为Flex布局 */
list-style: none; /* 取消初始项目符号样式 */
padding: 0;
margin: 0;
}
li {
/* 设定每个菜单项的基本样式 */
margin: 0 10px;
border: 1px solid #fff;
border-radius: 5px;
}
li a {
/* 设定链接样式 */
display: block;
color: #fff;
text-decoration: none;
padding: 5px;
}
li:hover {
/* 鼠标悬停时的样式 */
background-color: #fff;
border-color: #333;
}
li:hover a {
/* 鼠标悬停时链接的样式 */
color: #333;
}

通过以上代码，我们完成了水平菜单导航加边界。这种方法可以让我们轻松的控制菜单项的样式，例如间距、边界线粗细等。