html - 高度和宽度嵌套在 a 中的元素不工作

Question

我正在编写这段代码，但它不适用于导航中不同类的大小（高度和宽度）。谁能解释一下为什么？其他属性都运行良好（字体大小等）。我正在运行 chrome 和 firefox。

html：

<nav>
    <ul>
        <li class="social">a</li>
        <li class="bookmarks">b</li>
        <li class="logo">brand</li>
        <li class="meta-putsches">c</li>
        <li class="login">d</li>
    </ul>
</nav>

的CSS：

nav {
  display: block;
  margin: auto; }
nav ul {
  margin: 0;
  padding: 0; }
nav ul li {
  display: inline;
  background-color: #000000; }
nav ul li.logo {
  width: 16em;
  height: 65px;
  font-size: 53pt;
  font-weight: bold;
  line-height: 59pt;
  color: #f4f4f4; }

Answer 1

你display: inline;的li元素是罪魁祸首。您不能在行内元素上设置宽度或高度。您应该将其更改为display: inline-block;，这将确保它们的流动不受干扰，但它可以设置元素的宽度和高度。在此处阅读 W3 规范，了解更多关于它是如何工作的以及它为什么会这样工作的信息。