Question

所以基本上我的问题是我的CSS中心导航栏很好，但所有链接都垂直列在水平居中的栏中。

最终看起来像是 http://i.imgur.com/rqcXwk4.png
但我需要这些链接是横向的。

<nav id="nav">
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#baa">Description</a></li>
    </ul>
</nav>

和CSS

}
nav ul {
display:inline;
}
.nav li{
    display:inline;
}
.nav a{
    float:left;
  display:inline-block;    
  padding:10px;
}
nav a:link, a:visited {
    display: block;
    width: 100%;
    font-family: Refrigerator;
    font-weight: bold;
    font-size: 1.5em;
    color: #FFFFFF;
    background-color: #778899;
    text-align: center;
    padding: 4px;
}

nav a:hover, a:active {
    background-color: #FF3333;
    color: black;
}

Answer 1

        #nav ul {
            display:inline;
        }
        #nav li{
            display:inline-block;
        }
        #nav a{
            float:left;
            display:inline-block;
            padding:10px;
        }
        nav a:link, a:visited {
            display: block;
            width: 100%;
            font-family: Refrigerator;
            font-weight: bold;
            font-size: 1.5em;
            color: #FFFFFF;
            background-color: #778899;
            text-align: center;
            padding: 4px;
        }

        nav a:hover, a:active {
            background-color: #FF3333;
            color: black;
        }

    <nav id="nav">
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#baa">Description</a></li>
        </ul>
    </nav>

希望，这会有所帮助。

Answer 2

您的CSS定位的对象为class="nav"而不是id="nav"。将.更改为#，它应该可以正常运行。

Answer 3

你需要重温CSS的讲座。您可能也会对下面的代码段中使用flexbox感兴趣。

nav a {
    font-family: Refrigerator;
    font-weight: bold;
    font-size: 1.5em;
    color: #FFFFFF;
    background-color: #778899;
    text-align: center;
    padding: 4px;
}

nav a:hover {
    background-color: #FF3333;
    color: black;
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
}

<nav id="nav">
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#baa">Description</a></li>
    </ul>
</nav>

水平导航栏中心，但链接是垂直的？

3 个答案: