居中UL拉伸全寬div

Question

我想讓這個菜單欄出現在容器/ div（水平）的全寬度。菜單項之間的金額等於li s。我希望這適用於每個視口。

事情是margin: 0 auto;不起作用。我該怎麼做呢？

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

Answer 1

容器/ div（水平）的全寬度。如果您希望每個視口都有相同數量的（邊緣）在裏面。

你可以用這樣的Flexbox的嘗試，如果這就是你想要的東西：

.button-row { 
 
    background-color: #fcfcfc; 
 
    height: 70px; 
 
    width: 100%; 
 
} 
 
.button-row ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 
.button-row ul li { 
 
    display: block; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 20%; 
 
    text-align: center; 
 
} 
 
.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>

Answer 2

.button-row{ 
 
    width: 100%; 
 
} 
 
.button-row a{ 
 
    display: inline-block; 
 
    width: calc(100%/5); 
 
    float: left; 
 
    text-align: center; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="button-row"> 
 
     <a>Additional information</a> 
 
     <a>Current exchange rates</a> 
 
     <a>ATMs and institutions</a> 
 
     <a>Protection</a> 
 
     <a>Files to download</a> 
 
    </div> 
 
    </div> 
 
</div>

沒有UL李和充分響應。

Answer 3

這裏我的導航欄

#navi 
 
{ \t 
 
\t width:100%; 
 
\t 
 
} 
 
center{ 
 
\t background-color: #333; 
 
\t height:7%; 
 
} 
 
.ulnav { 
 
\t float:right; 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
\t background-color: #333; 
 
\t margin-right:350px; 
 
} 
 

 
.ulnav li { 
 
\t float: left; 
 
\t border-right:1px solid blue; 
 
\t border-left:1px solid red; 
 
} 
 

 
.ulnav li:last-child { 
 
    border-right: none; 
 
} 
 

 
.ulnav li a { 
 
    display: block; 
 
    \t color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.ulnav li a:hover:not(.active) { 
 
\t color: #ccff33; 
 
    background-color: #111; 
 
} 
 

 
.active { 
 
    background-color: #ccff33; 
 
}

<center><ul class="ulnav"> 
 

 
    <li><a class="active">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></center>