我的 navbar 拒绝水平显示。我已将所有 li 元素都 float 到左侧，并将 display:inline-block 元素添加到各个 block 、列表元素和列表本身，并尝试了每种组合。我终于得到了我喜欢的列表，现在唯一让这个列表不完美的是它没有水平显示。为什么？？？
<head>
<title>Troop 25 Homepage</title>
<style>
.navbar {
float: top;
width: 182.8px;
height: 30px;
display: inline-block;
}
li {
float: left;
display: inline-block;
}
.nav {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
}
a:link, a:visited {
display: inline-block;
width: 182.8px;
line-height: 30px;
padding-top: 13px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
text-decoration: none;
text-align: center;
background-color: #006b00;
color: white;
font-weight: bold;
float: left;
}
a:hover, a:active {
background-color: #C0C0C0;
}
a:active {
color: grey;
}
.nav_bar_text {
font-size: 17px;
}
.Mackin_text {
font-size: 17px;
vertical-align: text-center;
}
h1 {
text-decoration: underline;
color: #006b00;
}
p {
font-size: 30px;
}
</style>
</head>
这是我的列表的 HTML。
<div class="navbar">
<ul class="nav">
<li><a class="nav_bar_text" href=#Home>Home</li></a>
<li><a class="nav_bar_text" href="#Resources">Resources</li></a>
<li><a class="nav_bar_text" href="#Calendar">Calendar</li></a>
<li><a class="nav_bar_text" href="#Year Plan">Year Plan</li></a>
<li><a class="nav_bar_text" href="#Gallery">Gallery</li></a>
<li><a class="nav_bar_text" href="#Videos">Videos</li></a>
<li><a class="Mackin_text" href="#Mackin Society">Mackin Society</li></a>
</ul>
</div>
最佳答案
将 .navbar width 更改为 100%
.navbar
{
float:top;
width:100%;
height:30px;
display:inline-block;
}
尝试 this
关于html - 我的水平导航栏不会水平显示，为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24869753/