Question

我做了一些字体大小和盒子大小的研究。我创建了ul li并使用一些CSS为它们设置样式，使它们看起来像一张桌子并保持内联。在史诗代码之后我意识到每个单词都不同，如家，教程，联系我们和注册。所有字体都有不同的大小和不同的填充使用。

所以这是我的代码...... 我把它整理好，所以它看起来不像我的本地主机。我所做的是将百分比设置为3.5754％来设置填充以获得框的精确相同宽度。所以其中4个应该是相同大小的盒子。

在家里我创建了5％左右的填充。在教程我创建填充像3.something％等等。

因为每个单词的宽度和字母数都不同。

对不起我的英文，如果我让你们困惑，请告诉我。但请帮助这个百分比和字体的东西。我真的不明白。如果你们有一些文章要阅读它也有帮助......因为我还在寻找它。 ty guys：）

body {
  margin: 0;
  padding: 0;
}
.navigation {
  top: 0;
  width: 90%;
  height: 120px;
  background: #ccc;
  margin: 0 auto;
  text-align: center;
}
.nav-head {
  padding-top: 5%;
  padding-left: 0;
  width: 100%;
  margin:
  /*0 7.2%*/
  ;
}
.nav a {
  color: #e74c3c;
  text-decoration: none;
  font-size: 1em;
}
.nav {
  list-style: none;
  display: inline;
  border: solid 1px #e74c3c;
  margin-left: 0;
}
#nav1 {
  padding: 1% 1%;
}
#nav2 {
  padding: 1% 5.74%;
}
#nav3 {
  padding: 1% 3%;
}
#nav4 {
  padding: 1% 3%;
}
.nav:hover {
  padding: 2.2% 5%;
  border: solid 1px #e74c3c;
}
.nav.currentpage {
  padding: 2.2% 5%;
  border: solid 1px #e74c3c;
}

<nav class="navigation">
  <ul class="nav-head">
    <li class="nav" id="nav1"><a href="#">HOME</a>
    </li>
    <li class="nav" id="nav2"><a href="#">REGISTRATION</a>
    </li>
    <li class="nav" id="nav3"><a href="#">TUTORIAL</a>
    </li>
    <li class="nav" id="nav4"><a href="#">CONTACT US</a>
    </li>
  </ul>
</nav>

Answer 1

我相信2个简单的选择：

1）display:table + table-layout:fixed;

body {
  margin: 0;
  padding: 0;
}
.navigation {
  width: 90%;
  height: 120px;
  background: #ccc;
  margin: 0 auto;
  text-align: center;
}
.nav-head {
  display:table;
  width:100%;
  padding:0;
  table-layout:fixed;
}
.nav a {
  color: #e74c3c;
  text-decoration: none;
  font-size: 1em;
}
.nav {
  display:table-cell;
  border: solid 1px #e74c3c;
}
#nav1 {
}
#nav2 {
}
#nav3 {
}
#nav4 {
}
.nav:hover {
  border: solid 1px ;
}
.nav.currentpage {
  border: solid 1px ;
}

<nav class="navigation">
  <ul class="nav-head">
    <li class="nav" id="nav1"><a href="#">HOME</a>
    </li>
    <li class="nav" id="nav2"><a href="#">REGISTRATION</a>
    </li>
    <li class="nav" id="nav3"><a href="#">TUTORIAL</a>
    </li>
    <li class="nav" id="nav4"><a href="#">CONTACT US</a>
    </li>
  </ul>
</nav>

2）display:flex + flex:1;

body {
  margin: 0;
  padding: 0;
}
.navigation {
  width: 90%;
  height: 120px;
  background: #ccc;
  margin: 0 auto;
  text-align: center;
}
.nav-head {
  display:flex;
  padding:0;
  list-style-type:none;
}
.nav a {
  color: #e74c3c;
  text-decoration: none;
  font-size: 1em;
}
.nav {
  flex:1;
  border: solid 1px #e74c3c;
}
#nav1 {
}
#nav2 {
}
#nav3 {
}
#nav4 {
}
.nav:hover {
  border: solid 1px ;
}
.nav.currentpage {
  border: solid 1px ;
}

<nav class="navigation">
  <ul class="nav-head">
    <li class="nav" id="nav1"><a href="#">HOME</a>
    </li>
    <li class="nav" id="nav2"><a href="#">REGISTRATION</a>
    </li>
    <li class="nav" id="nav3"><a href="#">TUTORIAL</a>
    </li>
    <li class="nav" id="nav4"><a href="#">CONTACT US</a>
    </li>
  </ul>
</nav>

Answer 2

您可以使用Flexbox帮助您制作宽度相同的所有项目。

<nav class="navigation">
  <ul class="nav-head">
    <li class="nav" id="nav1"><a href="#">HOME</a>
    </li>
    <li class="nav" id="nav2"><a href="#">REGISTRATION</a>
    </li>
    <li class="nav" id="nav3"><a href="#">TUTORIAL</a>
    </li>
    <li class="nav" id="nav4"><a href="#">CONTACT US</a>
    </li>
  </ul>
</nav>

ILogger

Answer 3

使用百分比并不总是最好的主意，特别是对于填充。相反，使用min-width，普通填充并使用font-size控制排水沟：在父级上使用0，在LI上使用普通填充

以下是代码：

.nav-head{
  font-size:0;
}
.nav {
  padding: 2px 5px !important;
  min-width: 116px;
  display: inline-block;
  margin: 0 !important;
  font-size: 15px;
  border:1px solid red;
}

这是DEMO

以下是font-zero概念link

的解释

如何设置每个框的字体大小和填充百分比相等？

3 个答案: