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

Question

我一直试图将导航菜单与标题图像对齐一段时间但没有成功。我希望列表的第一个和最后一个元素位于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（注意我正在使用bootstrap，所以还有bootstrap 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;
}

提前感谢您的帮助！

Answer 1

我发现在包装器中使用内联块div最成功，其间有间隔符。这是一个它可能是什么样子的例子。我添加了对齐以保持边缘在左右两侧完全对齐。

https://jsfiddle.net/trmjjo4w/

代码：

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;