Tiboon Tiboon - 2 months ago 7
CSS Question

CSS centering a ul stretch full width div

I have tried a lot allready, I want to get this menu bar to appear on the full width of the container/div (horizontal). with equal amount of (margin) in between the li's. For every viewport.
The thing is margin: 0 auto; doesnt work.

Anyone any tips? :)

Thanks a lot already



.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

Full width of the container/div (horizontal). with equal amount of (margin) in between the li's, for every viewport as you wish.

You can try with flexbox like this, if that's what you want:

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

Comments