Question

我正在尝试建立一个新闻网站，但我遇到了将标签集中在页面顶部的问题。任何人都可以给我一些如何解决这个问题的技巧，并解释一下（我是网络开发的新手）。提前谢谢。

＆＃13;

ul{list-style-type: none;
        text-align: center;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        background-color: #333333;}

        li{float: right;
        margin: 0 auto;
        border-right: 1px solid black;
        border-bottom: 1px solid black}

        li a{display: inline-block;
        background-color: #333333;
        color: white;
        text-align: center;
        padding: 10px;
        text-decoration: none;}

        li a:hover {background-color: black;}

＆＃13;

  <ul role="menubar">
    <li></li>
    <li><a href="#news">News</a></li>
    <li><a href="#sport">Sports</a></li>
    <li><a href="#business">Business</a></li>
    <li><a href="#TV">TV</a></li>
    <li><a href="#car">Automobiles</a></li>
    <li><a href="#culture">Culture</a></li>
    <li><a href="#fashion">Fashion</a></li>
    <li><a href="#food">Food</a></li>
    <li><a href="#health">Healthcare</a></li>
    <li><a href="#tourism">Tourism</a></li>
    <li><a href="#TECH">TECH</a></li>
  </ul>

＆＃13;

Answer 1

将您的li更改为display: inline-block并移除float: right。这将允许父text-align: center上的ul居中工作。

＆＃13;

ul{
    list-style-type: none;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}
li{
    display: inline-block;
    margin: 0 auto;
    border-right: 1px solid black;
    border-bottom: 1px solid black
}
li a{
    display: inline-block;
    background-color: #333333;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}
li a:hover{background-color: black;}

＆＃13;

<ul role="menubar">
    <li></li><li><a href="#news">News</a></li><li><a href="#sport">Sports</a></li><li><a href="#business">Business</a></li><li><a href="#TV">TV</a></li><li><a href="#car">Automobiles</a></li><li><a href="#culture">Culture</a></li><li><a href="#fashion">Fashion</a></li><li><a href="#food">Food</a></li><li><a href="#health">Healthcare</a></li><li><a href="#tourism">Tourism</a></li><li><a href="#TECH">TECH</a></li>
</ul>

＆＃13;

页面顶部的标签未正确对齐

1 个答案: