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

【问题标题】：how to set a font size and padding percentage to be equal each boxes?如何将字体大小和填充百分比设置为每个框相等？
【发布时间】：2018-03-12 18:00:09
【问题描述】：

我对字体大小和框大小进行了一些研究。我创建了 ul li 并用一些 CSS 设置它们的样式，使它们看起来像一个表格并保持内联。在史诗代码之后，我意识到每个词都是不同的，比如家、教程、联系我们和注册。所有字体都有不同的大小和不同的填充使用。

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

在家里，我创建了 5% 左右的填充。在教程中，我创建了像 3.something% 这样的填充等等。

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

对不起我的英语，如果我让你们感到困惑，请告诉我.. 但请帮助解决这个百分比和字体问题。我真的不明白。如果你们有一些文章要阅读它也会有所帮助......因为我仍在寻找它。伙计们:)

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>

【问题讨论】：

那么您是否希望所有四个框都具有最大框的宽度？
为什么在css中使用.currentpage，currentpage类在哪里？

标签： html css fonts

【解决方案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>

【讨论】：

【解决方案2】：

使用百分比并不总是最好的主意，特别是对于填充。取而代之的是，使用 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

这里是对零字体概念link的解释

【讨论】：

对不起，尝试从 1 到另一个的答案太长了。哇，伙计，我想你得到了最好的答案。你很聪明，这与我认为的字体大小无关。这是关于你给盒子的最小宽度和填充......我说的对吗？
@newguy 沿着这些思路，但字体大小将清除导航项目之间的边距，以便它们粘在一起。除非你真的想要它们之间的差距，否则你不需要那个。但是，是的，最小宽度和填充是您控制房地产的方式:) 如果您喜欢答案，请将其标记为这样，其他人将从中受益（y）
好人...我现在明白了.. tyvm...好吧，现在我可以因为你玩游戏了。大声笑

【解决方案3】：

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

body {
  margin: 0;
  padding: 0;
}
.navigation {
  top: 0;
  width: 90%;
  height: 120px;
  background: #ccc;
  margin: 0 auto;
  text-align: center;
}
.nav-head {
  display: flex;
  padding-top: 5%;
  padding-left: 0;
  width: 100%;
}
.nav a {
  color: #e74c3c;
  text-decoration: none;
  font-size: 1em;
}
.nav {
  list-style: none;
  flex: 1;
  border: solid 1px #e74c3c;
  margin-left: 0;
  padding-top: 2.2%;
  padding-bottom: 2.2%;
}
.nav:hover {
  border: solid 1px #e74c3c;
}
.nav.currentpage {
  padding-top: 2.2%;
  padding-bottom: 2.2%;
  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>

【讨论】：