html - 如何同时拥有水平和垂直导航栏

标签 html css

如何才能同时拥有水平和垂直导航栏?我是设计方面的初学者,我想弄清楚我做错了什么,但我不确定如何在多个链接上使用 CSS。

<body>
  <div class="horizontallinks">
    <ul>
      <li> link1 </li>
      <li>link 2</li>
      <li>link 3</li>
      <li>
        <link 4</div>
        <div class="verticallinks">
          <ui>
            <li>link a </li>
            <li> link b</li>
            <li> link c </li>
        </div>
    </ul>
</body>

CSS:

.horizontallinks {
  position: fixed;
  list-style-type: none;
  margin-top: 70px;
  margin-left: 300px;
  padding: 0;
  font-size: 18px;
  overflow: hidden;
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.verticallinks {
  position: fixed;
  list-style-type: none;
  padding: 0;
  font-size: 18px;
  margin-left: 45px;
  margin-top: 165px;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.horizontallinks {
  position: fixed;
  list-style-type: none;
  margin-top: 70px;
  margin-left: 300px;
  padding: 0;
  font-size: 18px;
  overflow: hidden;
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.verticallinks {
  position: fixed;
  list-style-type: none;
  padding: 0;
  font-size: 18px;
  margin-left: 45px;
  margin-top: 165px;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li {
  float: left;
}
li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
<body>
  <div class="horizontallinks">
    <ul>
      <li>link1</li>
      <li>link 2</li>
      <li>link 3</li>
      <li>link 4</li>
    </ul>
    <div class="verticallinks">
      <ul>
        <li>link a</li>
        <li>link b</li>
        <li>link c</li>
      </ul>
    </div>
  </div>
</body>

最佳答案

试试这个

<body>
    <h2 class="horizontallinks">
        <ui class="make-inline"> 
            <li>link1</li>
            <li>link 2</li>
            <li>link 3</li>
            <li>link 4</li>
        </ul>
    </h2>
    <div class="body-wrapper">
        <div class="side-bar"> 
            <ui> 
                <li>link a</li>
                <li>link b</li>
                <li>link c</li> 
            </ul>
        </div>
        <div class="body-style">
            <!-- Body content -->
        </div>
    </div>
</body>

关于html - 如何同时拥有水平和垂直导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34358708/

相关文章:

html - 为什么将图像的宽度设置为由 css flexbox 排序的 div 内的百分比会增加额外的高度到 div?

html - 将设置了 float 的 div 居中

javascript - select2 改变背景颜色

javascript - 如何向 tumblr 主题添加粘性元素?

css - 两个 div 并排在一个容器 css 中

html - 用户选择静止图像复制到剪贴板

javascript - Levenshtein 阵列测距

javascript - 我如何从另一个外部 javascript 文件中的外部 javascript 文件调用函数?

css - 嵌套表格可能的 CSS 特异性和继承错误

html - 响应式网格布局纵向仪表板 100%h&w CSS?