html - css 的按钮对齐

Question

我正在设计一个个人网站，当我缩小页面时，我遇到了按钮间距的问题。当页面已满时，按钮在中间，但当我缩小窗口时它不会留在中间。有谁知道我可以解决这个问题吗？

<div id="navigation">
    <ul id="nav_buttons">
        <a href="firstpage.html"> 
            <li class="navbutton" id="home">
                Home
            </li>
        </a>
        <a href="contactpage.html">
            <li class="navbutton" id="contact">
                Contact Me
            </li>
        </a>
        <a href="resume.html">
            <li class="navbutton" id="resume">
                Resumé
            </li>
        </a>
        <a href="resume.html">
            <li class="navbutton" id="projects">
                Projects
            </li>
        </a>
    </ul>
</div>

#navigation
{
width: 100%;
}
#nav_buttons
{
margin-left: 28%;
width: 100%;
}
.navbutton
{
line-height: 150%;
font-size: 24px;
background-color: #7373AF;
height: 42px;
width: 120px;
display: inline-block;
color: white;
text-align: center;
font-family: 'Lato', Tahoma;
overflow: hidden;
text-overflow: ellipsis;
z-index: 1;
position: relative;
float: left;
vertical-align: top;
border-left: 2px solid black;
border-right: 2px solid black;
}
.navbutton:hover
{
background-color: #68689E;
}
#projects
{
margin-right: 0px;
margin-left: 0px;
border-right: 0px solid black;
}
#home
{
border-left: 0px solid black;
}

JSFiddle

Answer 1

这是 Flexbox 的重要用例之一。

给定一个这样的列表:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

您可以将容器设置为 display: flex;，将子容器(在本例中为 li)设置为 flex: 1，这将元素的固有宽度设置为 0，因此它们都相同，然后在元素之间平均分配可用空间:

ul { display: flex; }

li {
  flex: 1;
}

我举了一个简单的例子:http://jsbin.com/pigofi/1/