以ul拉伸全宽div为中心

Question

我希望此菜单栏显示在容器/ div的整个宽度（水平）上。在菜单项之间具有相等的余量，即li s。我希望这适用于每个视口。

事情是margin: 0 auto;不起作用。我该怎么做呢？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

容器/ div的全宽（水平）。对于每个视口，在li之间具有相等数量的（边距）。

你可以尝试使用这样的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>

没有ul li并且完全响应。

Answer 3

这里是我简单的导航栏代码

＆＃13;

＆＃13;

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

＆＃13;

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

   

＆＃13;

＆＃13;

＆＃13;