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