我一直试图将导航菜单与标题图像对齐一段时间但没有成功。我希望列表的第一个和最后一个元素位于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;
}
提前感谢您的帮助!
答案 0 :(得分:0)
我发现在包装器中使用内联块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;
}
&#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;