將水平列表與另一個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（請注意，我正在使用引導程序，因此也有使col-md-12具有100％寬度的引導程序css文件）：

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

碼：

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