Zentrierung einer ul dehnen voller Breite div

Question

Ich möchte diese Menüleiste auf der gesamten Breite des Containers/div (horizontal) angezeigt werden. Mit gleicher Marge zwischen den Menüpunkten, die li s sind. Ich möchte, dass dies für jedes Ansichtsfenster funktioniert.

Die Sache ist margin: 0 auto; funktioniert nicht. Was soll ich stattdessen tun?

.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

Volle Breite des Containers/div (horizontal). mit der gleichen Anzahl von (Rand) zwischen den li, für jedes Ansichtsfenster, wie Sie möchten.

Sie mit Flexbox wie diese versuchen kann, wenn es das ist, was Sie wollen:

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

Ohne ul li und voll ansprechbar.

Answer 3

Hier ist meine einfache Code der Navigationsleiste

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