水平导航栏居中，但链接是垂直的？答案

【问题标题】：Horizontal nav bar centers, but links are vertical?水平导航栏居中，但链接是垂直的？
【发布时间】：2015-09-30 22:57:36
【问题描述】：

所以基本上我的问题是我的 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;
}

【问题讨论】：

这个问题已经被问过很多次了，你试图做的是居中水平列表。这里是one example。

标签： html css navbar

【解决方案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>

希望，它会有所帮助。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您需要重温有关 CSS 的讲座。您可能还会对使用下面的 sn-p 中的 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>

【讨论】：