让导航栏具有相等的空格

Question

我的代码试图进入导航栏时遇到一些问题，每个部分都有相同的空间，根据标题中的字符数没有空格。例如，MAP应该与ABOUT一样多。

现在看来是这样的：

＆＃13;

＆＃13;

.wrap {
  width: 90%;
  background-image: url(images/navbarbackground.png);
  background-repeat: no-repeat;
  margin: auto;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
  padding: 0px;
  font-family: minecrafter;
}
.wrap:after {
  content: " ";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.wrap ul {
  display: table;
  width: 95%;
}
.wrap li {
  display: table-cell;
  vertical-align: middle;
}
.wrap li a {
  text-decoration: none;
  background-color: #EEEEEE;
  color: #666666;
  padding: 6px 0 6px 0;
  border: 1px solid #CCC;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  display: block;
  text-align: center;
}
.wrap h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #ffffff;
  width: 6em;
  text-align: center;
  line-height: 1.0;
  letter-spacing: .04em;
  display: in line-block;
  vertical-align: middle;
  float: left;
}
.wrap h2 span {
  display: block;
  letter-spacing: .17em;
}
.navwrap {
  margin-top: 0px;
  overflow: hidden;
  padding-top: 16px;
  padding-bottom: 0px;
  margin-bottom: 10px;
}

＆＃13;

<div class="wrap">
  <h2 class="minecrafter">Miners <span>Union</span></h2>
  <div class="navwrap">
    <ul class="nav">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Forums</a>
      </li>
      <li><a href="#">Donate</a>
      </li>
      <li><a href="#">Apply</a>
      </li>
      <li><a href="#">Map</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以试试这个：fiddle

list(response.streaming_content)[0].decode("utf-8")

Answer 2

你只需要

.wrap ul {   表格的布局：固定; /* 这个 */ }

＆＃13;

＆＃13;

.wrap {
  width: 90%;
  background-image: url(images/navbarbackground.png);
  background-repeat: no-repeat;
  margin: auto;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
  padding: 0px;
  font-family: minecrafter;
}
.wrap:after {
  content: " ";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.wrap ul {
  display: table;
  width: 80%; /* adjusted for demo only */
  table-layout:fixed;
}
.wrap li {
  display: table-cell;
  vertical-align: middle;
}
.wrap li a {
  text-decoration: none;
  background-color: #EEEEEE;
  color: #666666;
  padding: 6px 0 6px 0;
  border: 1px solid #CCC;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  display: block;
  text-align: center;
}
.wrap h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #ffffff;
  width: 6em;
  text-align: center;
  line-height: 1.0;
  letter-spacing: .04em;
  display: in line-block;
  vertical-align: middle;
  float: left;
}
.wrap h2 span {
  display: block;
  letter-spacing: .17em;
}
.navwrap {
  margin-top: 0px;
  overflow: hidden;
  padding-top: 16px;
  padding-bottom: 0px;
  margin-bottom: 10px;
}

＆＃13;

<div class="wrap">
  <h2 class="minecrafter">Miners <span>Union</span></h2>
  <div class="navwrap">
    <ul class="nav">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Forums</a>
      </li>
      <li><a href="#">Donate</a>
      </li>
      <li><a href="#">Apply</a>
      </li>
      <li><a href="#">Map</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

或者这样看

.nav{
list-style: none;
}
.nav li{
  display: inline-block;
  min-width: 100px;

}
.nav li a{
  text-decoration: none;
  background-color: #EEEEEE;
  color: #666666;
  padding: 6px;
  border: 1px solid #CCC;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  display: block;
  text-align: center;
}