Question

我的navbar拒绝水平显示。我已将所有li元素浮动到左侧，并将display:inline-block元素添加到各个块以及列表元素和列表本身，并尝试了每个组合。我终于得到了我喜欢它的列表，现在唯一保持这个列表不完美的是它没有水平显示。 WHY ???

<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>

Answer 1

将您的.navbar width更改为100%

.navbar
{
  float:top;
  width:100%;
  height:30px;
  display:inline-block;
}

尝试this

我的水平导航栏不能水平显示，为什么？

1 个答案: