Tiboon Tiboon - 2 months ago 10
HTML Question

Centering a ul stretch full width div

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 menu items, which are

li
s. I want this to work for every viewport.

The thing is
margin: 0 auto;
doesn't work. What should I do instead?



.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