目标效果是,一排div都有float:left样式,水平排列,并希望它们处于屏幕的中间,办法是在div们的父级div加一个 display:inline-block 样式,父级的父级使用text-clign:center样式就可以了。代码如下:
HTML
<div class="xlk-nav">
<div style="display: inline-block;">
<div class="xlk-menu">菜单标题</div>
<div class="xlk-menu">菜单标题菜单标题</div>
<div class="xlk-menu">菜单标题</div>
<div class="xlk-menu">菜单标题</div>
<div class="xlk-menu">菜单标题</div>
<div class="xlk-menu">菜单标题</div>
</div>
</div>
CSS
* {
padding: 0px;
margin: 0px;
}
.xlk-nav {
width: 100%;
height: 40px;
background-color: #002B57;
text-align: center;
}
.xlk-menu {
height: 100%;
float: left;
background-color: black;
line-height: 40px;
color: white;
padding: 0 20px;
margin-right: 20px;
}