3

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 lis. 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>
user234562
  • 631
  • 9
  • 20

3 Answers3

2

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>
Khallister
  • 266
  • 1
  • 8
0

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

Without ul li and fully responsive.

Safal Pillai
  • 1,567
  • 1
  • 16
  • 31
0

Here my simple code of navigation bar 

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

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

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

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

 .ulnav li a:hover:not(.active) {
 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>
Aamir
  • 269
  • 4
  • 21