Центрирование ul stretch full width 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>

Без уль Ли и полностью отзывчивым.

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>