Question

我使用列表为页面制作一个简单的菜单。例如，所有元素的字体大小，但首先我定义为40px。第一个继续其默认大小。这样做，第一个<li>在其中显示了一个奇怪的空间。看小提琴。

将所有元素置于相同位置是可取的。这个空间来自哪里？

CODE：

＆＃13;

.logo-letter-text {
  width: 1em;
  vertical-align: middle;
  display: inline-block;
  text-align: center;
  font-family: "Bebas Kai";
  font-weight: 400;
  color: rgba(246, 244, 229, 1.0);
}
.nav-menu {
  position: relative;
  position: fixed;
  top: 0;
  width: 100%;
  height: 8%;
  background: rgba(18, 18, 18, 1.0);
}
.nav-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  height: 100%;
  text-align: left;
  padding-left: 30px;
  border: 2px solid rgba(255, 255, 255, 1.0);
}
.nav-menu ul li {
  border: 2px solid rgba(255, 0, 255, 1.0);
  list-style-type: none;
  line-height: 50px;
  padding-left: 12px;
  padding-right: 12px;
  height: auto;
  display: inline-block;
}
.nav-menu ul li:nth-child(n+2) {
  color: rgba(86, 86, 86, 1.0);
}
.nav-menu ul li:hover {
  color: rgba(255, 255, 255, 1.0);
}
.nav-menu ul li:nth-child(1) {
  border: 2px solid rgba(255, 0, 0, 1.0);
  background: rgba(255, 102, 0, 1.0);
  padding: 0;
  margin: 0;
}
.nav-menu ul li:nth-child(n+2) {
  font-size: 40px;
}

＆＃13;

<body class="bg-theme-main">
  <nav class="nav-menu">
    <ul>
      <li><span class="logo-letter-text">M </span><span class="logo-letter-text">B </span><span class="logo-letter-text">A </span>
      </li>
      <li><span>A</span>
      </li>
      <li><span>B</span>
      </li>
      <li><span>C</span>
      </li>
      <li><span>D</span>
      </li>
    </ul>
  </nav>
</body>

＆＃13;

Answer 1

inline-block默认为vertical-aligne d baseline，您将其设置为middle第一个，但您需要将其设置为top

.logo-letter-text {
  width: 1em;
  text-align: center;
  font-family: "Bebas Kai";
  font-weight: 400;
  color: rgba(246, 244, 229, 1.0);
}
.nav-menu {
  position: relative;
  position: fixed;
  top: 0;
  width: 100%;
  height: 8%;
  background: rgba(18, 18, 18, 1.0);
}
.nav-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  height: 100%;
  text-align: left;
  padding-left: 30px;
  border: 2px solid rgba(255, 255, 255, 1.0);
}
.nav-menu ul li {
  border: 2px solid rgba(255, 0, 255, 1.0);
  list-style-type: none;
  line-height: 50px;
  padding-left: 12px;
  padding-right: 12px;
  height: auto;
  display: inline-block;
  vertical-align: top;
}
.nav-menu ul li:nth-child(n+2) {
  color: rgba(86, 86, 86, 1.0);
}
.nav-menu ul li:hover {
  color: rgba(255, 255, 255, 1.0);
}
.nav-menu ul li:nth-child(1) {
  border: 2px solid rgba(255, 0, 0, 1.0);
  background: rgba(255, 102, 0, 1.0);
  padding: 0;
  margin: 0;
}
.nav-menu ul li:nth-child(n+2) {
  font-size: 40px;
}

<body class="bg-theme-main">
  <nav class="nav-menu">
    <ul>
      <li><span class="logo-letter-text">M </span><span class="logo-letter-text">B </span><span class="logo-letter-text">A </span>
      </li>
      <li><span>A</span>
      </li>
      <li><span>B</span>
      </li>
      <li><span>C</span>
      </li>
      <li><span>D</span>
      </li>
    </ul>
  </nav>
</body>

Answer 2

而不是使用.nav-menu ul li {display: inline-block}

使用.nav-menu ul li {float: left;}

请参阅小提琴https://jsfiddle.net/4uggcyro/4/

或者另一种解决方案是使用display: flex;

.nav-menu ul {
  display: flex;
  flex-direction: row;
}

请参阅小提琴https://jsfiddle.net/4uggcyro/6/

首先<li>显示不正确

2 个答案: