Question

＆＃13;

      body {
        font-family: verdana;
      }

      ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden; /*1.Why after deleting this line the menu diappear？*/
        background-color: #666;
      }

      ul li {
        float: left; /*2.Why after deleting the menu become a column shape？*/
      }

      ul li a {
        display: inline-block; /*3.Why after deleting the menu become smaller？*/
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        text-align: center;
      }

      ul li a:hover {
        background-color: #111;
      }

＆＃13;

<!DOCTYPE html>
<html>
 
  <body>
    <h2>Menu Demo 2:</h2>
    <ul>
      <li><a href="...">HTML</a></li>
      <li><a href="...">CSS</a></li>
      <li><a href="...">JavaScript</a></li>
      <li><a href="...">Contact</a></li>
    </ul>
  </body>
</html>

＆＃13;

我是CSS的新手。这只是一个非常简单的菜单演示，但我想了3个小时仍然没有理解它。 我已将3个问题放入代码，即： -

[1]为什么我删除该行＆＃39; overflow：hidden;＆＃39;在＆＃39; ul＆＃39;标签，然后菜单消失？

[2]为什么删除行后浮动：左;＆＃39;在＆＃39; li＆＃39; tage然后整个菜单变成了一个圆柱形？我想在那条线下面我设置了一个＆＃39; a＆＃39;标记为＆＃39;显示： - 内联块＆＃39; ......＆float; left＆＃39;以及它的用途是什么？这里吗？

[3]为什么我要更改＆＃39; display：inline-block＆＃39;显示：内联＆＃39;，然后整个菜单变得更小，填充顶部和＆amp;填充每个＆＃39; a＆＃39;标签不起作用？

Answer 1

overflow: hidden通过创建阻止上下文包含li内的浮动ul，这里有一个深入的解释：

Adding CSS border changes positioning in HTML5 webpage

float: left将所有内容拉到左侧，在您的情况下排成一行，没有float: left或right，默认值为none，这意味着元素将只是堆叠，这就是你得到列样式布局的原因。

其他用途中的inline-block或block会使元素在您提供的示例中包含填充到其高度。例如，如果在顶部和底部有10px高和20px填充的文本，则元素将为10px，因为填充将被忽略，添加显示类型block或inline-block这需要它考虑到并在50px的高度渲染。

如何理解这个CSS菜单演示？

1 个答案: