Question

使用以下代码，它无法将自身与中心对齐，而且似乎是FLOAT的问题：

<nav>
    <ul>
        <li><a target="_parent" href="index.php" class="button">Home</a></li>
        <li><a target="_parent" href="about.html" class="button">About</a></li>
        <li><a target="_parent" href="login/reg.php" class="button">Register</a></li>
        <li><a target="_parent" href="private/" class="button">Member</a></li>
        <li><a target="_parent" href="chat.php" class="button">Chat</a></li>
        <li><a target="_parent" href="http://yo.hostei.com" class="button">URL Shortener</a></li>
        <li><a target="_parent" href="http://sql17.000webhost.com/phpMyAdmin/index.php?db=a7593238_data" class="button">Admin</a></li>
    </ul>
</nav>
<style>
    nav {
        text-align:center;
        width:100%;
    }
    ul li {
        list-style:none;
        text-align:center;
    }
    .button {
        text-decoration:none;
        color:#000000;
        padding:10px 20px;
        float:left;
        text-align:center;
    }
</style>

但是，我仍然需要这个浮动，否则<li>将是垂直列表，而不是水平列表我应该在<style> / CSS？

中做些什么

Answer 1

移除float并为display:inline添加li以使其成为水平。

nav {
        text-align:center;
        width:100%;
    }
    ul li {
        list-style:none;
        text-align:center;
        display:inline
    }
    .button {
        text-decoration:none;
        color:#000000;
        padding:10px 20px;
        text-align:center;
    }

<强> DEMO

Answer 2

删除float的{{1}}并为.button

添加display:inline-block;

Demo Fiddle

CSS

li

Answer 3

试试这个。

nav {
  margin:0 auto;  
    width:660px;
}

为什么我无法将此导航器对齐到中心？

3 个答案: