このメニューバーをcontainer/div(水平)の全幅に表示したいと考えています。メニュー項目間のマージンは同じで、li
です。これはすべてのビューポートで機能するようにしたい。ulストレッチ全幅divの中心合わせ
事はmargin: 0 auto;
は動作しません。代わりに私は何をすべきですか? ULのLiと完全に対応しなければ
.button-row {
background-color: #fcfcfc;
position: relative;
height: 70px;
width: 100%;
float: left;
overflow: hidden;
position: relative;
}
.button-row ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.button-row ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
.button-row ul li a {
display: block;
margin: 0 0 0 1px;
padding: 3px 10px;
text-decoration: none;
line-height: 1.3em;
}
<div class="container-fluid">
<div class="row">
<div class="button-row">
<ul>
<li><a>Additional information</a>
</li>
<li><a>Current exchange rates</a>
</li>
<li><a>ATMs and institutions</a>
</li>
<li><a>Protection</a>
</li>
<li><a>Files to download</a>
</li>
</ul>
</div>
</div>
</div>
の可能重複:http://stackoverflow.com/q/5186712/6501094 – Roy123