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;，这将确保它们的流量不受干扰，但它可以设置元素的宽度和高度。有一个read here at the W3 specification可以找到更多关于它是如何工作的以及为什么它的工作原理。

<li>元素中的高度和宽度嵌套在<nav>无效</nav> </li>中

1 个答案: