将水平列表与另一个 div 对齐答案

【问题标题】：Aligning horizontal list with another div将水平列表与另一个 div 对齐
【发布时间】：2015-03-14 11:27:15
【问题描述】：

一段时间以来，我一直在尝试将导航菜单与标题图像对齐，但没有成功。我希望列表的第一个和最后一个元素位于其 div 的角落，而其余元素均匀分布。有点像这张图：

我尝试使用 float、margin-left/margin-right: auto 并显示为表格，但我仍然没有找到一种有效且响应迅速的方法。

这是我的 html 代码：

<div id="navbar" class="container">
            <div class="row">
                <div class="col-md-12 logo-img">
                    <img class="" src="images/header.png"/>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="nav-menu">
                        <ul>
                            <li><a id="nav_projects" href="#projects">projects</a></li>
                            <li><a id="nav_about" href="#about">about</a></li>
                            <li><a id="nav_news" href="#news">news</a></li>
                            <li><a id="nav_contact" href="#contact">contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>

还有 css（请注意，我使用的是引导程序，因此还有引导 css 文件使 col-md-12 具有 100% 宽度）：

.logo-img {
    height: 140px;
}

.logo-img > img {
    max-width: 50%;
    margin: auto;
    display: block;
}

.nav-menu {
    width: 50%;
    height: 60px;
    margin: auto;
    display: block;
}

.nav-menu ul {
    width: 100%;
    height: 100%;
}

.nav-menu ul li {
    text-align: center;
    width: 24%;
    display: inline-block;
    font-size: 24;
    margin-left: auto;
    margin-right: auto;
} 

.nav-menu ul  li:last-child {
    margin-right: 0 !important;
}

.nav-menu ul li:first-child {
    margin-left: 0 !important;
}

提前感谢您的帮助！

【问题讨论】：

标签： html css twitter-bootstrap alignment html-lists

【解决方案1】：

我发现在包装器中使用内联块 div 最成功，中间有间隔。这是它可能看起来的示例。我添加了对齐以保持边缘在左右两边完全对齐。

https://jsfiddle.net/trmjjo4w/

代码：

#title {
    font-size: 18px;
    width:300px;
    background-color: red;
}
#list_wrap {
    width:300px;
    background-color: blue;
}
.list {
    display: inline-block;
    width: 10%;
}
.fill {
    display: inline-block;
    width: 17%;
    background-color: white;
}
#list2,#list3 {
    text-align: center;
}
#list4 {
    text-align: right;
}

<div id="title">title</div>
<div id="list_wrap">
    <div id="list1" class="list">list1</div>
    <div class="fill">FILL</div>
    <div id="list2" class="list">list2</div>
    <div class="fill">FILL</div>
    <div id="list3" class="list">list3</div>
    <div class="fill">FILL</div>
    <div id="list4" class="list">list4</div>
</div>

【讨论】：