Question

所以我在网上搜索了一个我可以使用的导航栏，找到一个后，我把它添加到我正在制作的网页

CSS：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #7A991A;
}

HTML：

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

w3schools link

无论如何，我如何将其集中在页面中间？

当我检查其他问题时，它说问题与 float：left 有关，但当我尝试用推荐的替代 display：inline-block; 它将垂直对齐方框

感谢任何帮助^^

Answer 1

试试这个CSS：

ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

li {
    display: inline-block;
}

正如您所看到的，它在每个元素之间留出了一点空间，这是因为由于<li>，HTML中display: inline-block行之间的回报已准备好作为空白区域。您可以使用以下方法删除这些空格：

<ul>
  <li><a href="#home">Home</a></li><!--
  --><li><a href="#news">News</a></li><!--
  --><li><a href="#contact">Contact</a></li><!--
  --><li><a href="#about">About</a></li>
</ul>

的 JSFIDDLE DEMO

我如何居中＆＃34;我的＆＃34;导航栏？

1 个答案: