html - 如何根据文本调整导航宽度？

Question

所以我的导航是宽度:78.8%;并且我需要在 fiddle 上像这样放入文本:https://jsfiddle.net/cj8c7mhr/

但是我如何设置自动以便我可以输入更长的单词。

<div class="nav-wrapp">
                    <div class="nav-box">
                        <nav class="navbar navbar-default pull-left">
                            <ul class="nav navbar-nav ">
                                <li><a href="#">O Revicon</a></li>
                                <li><a href="#">Konzalting</a></li>
                                <li><a href="#">Seminar i savjetovanja</a></li>
                                <li><a href="#">Časopisi</a></li>
                                <li><a href="#">Izdavaštvo</a></li>
                                <li><a href="#">Kontakt</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>

我希望他们彼此相邻......

Answer 1

CSS 表 似乎是这里的答案:

ul.nav.navbar-nav {
  width: 100%;
  display: table;
}
ul.nav.navbar-nav li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.nav-wrapp {
  float: left;
  border-top: 3px solid #C20C0C;
  border-bottom: 1px solid #ccc;
  width: 78.8%;
}
.nav-box {
  float: left;
  width: 100%;
}
.nav-wrapp .navbar-default {
  background-color: #fff;
  border: 0px;
  margin-bottom: 0px;
  height: 100%;
  font-family: 'PT_Sans_Caption_Bold';
  font-size: 16px;
  width: 100%;
}
ul.nav.navbar-nav {
  width: 100%;
  display: table;
}
ul.nav.navbar-nav li {
  display: table-cell;
  text-align: center;
  vertical-align:middle;
}
.nav-wrapp .nav.navbar-nav>li {
  border-right: 1px solid #ccc;
  min-height: 55px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-wrapp">
  <div class="nav-box">
    <nav class="navbar navbar-default pull-left">
      <ul class="nav navbar-nav ">
        <li><a href="#">O Revicon</a>
        </li>
        <li><a href="#">Konzalting</a>
        </li>
        <li><a href="#">Seminar i savjetovanja</a>
        </li>
        <li><a href="#">Časopisi</a>
        </li>
        <li><a href="#">Izdavaštvo</a>
        </li>
        <li><a href="#">Kontakt</a>
        </li>
      </ul>
    </nav>
  </div>
</div>