导航栏水平和垂直代码HTML/CSS

下面是一个简单的导航栏水平和垂直布局的代码示例：

水平布局的HTML代码：

<nav class="horizontal-navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

水平布局的CSS代码：

.horizontal-navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* 选项在导航栏水平方向上的分布方式 */
  align-items: center; /* 选项在导航栏垂直方向上的分布方式 */
  background-color: #f2f2f2;
  padding: 10px;
}

.horizontal-navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}

.horizontal-navbar li {
  margin: 0 10px;
}

.horizontal-navbar li a {
  text-decoration: none;
  color: #333;
}

垂直布局的HTML代码：

<nav class="vertical-navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

垂直布局的CSS代码：

.vertical-navbar {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 选项在导航栏水平方向上的分布方式 */
  align-items: center; /* 选项在导航栏垂直方向上的分布方式 */
  background-color: #f2f2f2;
  padding: 10px;
  height: 200px; /* 设置导航栏的高度 */
  overflow: auto; /* 设置滚动条的出现方式 */
}

.vertical-navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.vertical-navbar li {
  margin: 10px 0;
}

.vertical-navbar li a {
  text-decoration: none;
  color: #333;
}