网站导航菜单的分割线和水平居中

针对“网站导航菜单的分割线和水平居中”问题，下面是一份完整的攻略。

导航菜单分割线

在网站的导航菜单中，通常需要使用分割线来区分不同的菜单项，让菜单更加清晰易读。

Markdown中可以使用---和___两个符号来绘制分割线。在HTML中，我们可以使用hr标签绘制分割线。

下面是一些示例：

* Home
* About
* Contact
---
* Blog
* Portfolio
* Shop
---
* Log in
* Sign up

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
  <hr>
  <li>Blog</li>
  <li>Portfolio</li>
  <li>Shop</li>
  <hr>
  <li>Log in</li>
  <li>Sign up</li>
</ul>

在CSS中，我们可以使用border属性来绘制分割线。例如：

.nav li {
  display: inline-block;
  border-right: 1px solid #ccc;
  padding: 0 10px;
}
.nav li:last-child {
  border: none;
}

这段代码会为.nav类下的li元素添加右侧边框，最后一个li元素将不会添加边框。

导航菜单水平居中

对于导航菜单的水平居中，可以使用CSS中的text-align属性来实现。在HTML中，我们通常使用ul和li来创建菜单，将ul元素的text-align属性设置为center即可。

下面是一个示例：

<div class="nav-container">
  <ul class="nav">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

.nav-container {
  text-align: center;
}
.nav {
  display: inline-block;
  padding: 0;
}
.nav li {
  display: inline-block;
  margin: 0 10px;
}

这段代码会让.nav-container元素的文本水平居中，而.nav元素和其中的li元素会以inline-block的方式显示在.nav-container元素中间。

另一个示例：

<nav>
  <ul class="nav">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

nav {
  text-align: center;
}
.nav {
  display: inline-block;
  padding: 0;
}
.nav li {
  display: inline-block;
  margin: 0 10px;
}

这段代码会在nav元素中心显示.nav元素和其中的li元素。

综上所述，以上便是网站导航菜单的分割线和水平居中的完整攻略，希望能对你有所帮助。

阅读剩余 55%