Question

在下面的代码中，我试图了解下拉菜单。如果你看到输出，你可以注意到第一和第四的文本不是相等水平对齐，彼此之间的空格相等。例如，第四个右侧有更多的水平空间。什么是最好的方法来对齐文本在中间（水平）而不手动给出边距，填充等的值。就像应该有一种方法使用text-align:center或margin:auto auto可以对齐文本在无论文本长度或字体大小如何，都会自动居中。

    ul{
    width:350px;
    height:50px;
    padding-left:0;
    margin:0;
    background:#CCCCCC;
    }
    ul > li{
    list-style: none;
    display: inline;
    font-size: 24px;
    float: left;
    width: 106.66px;
    margin-right: auto;
    text-align: center;
    margin-left: auto;
    }
    ul > li > ul{
    margin:10px 0px;
    padding-left:0;
    width:80px;
    height:40px;
    visibility: hidden;
    }
    ul > li > ul > li{
    display:block;
    list-style-type:none;
    padding-left:10px;
    }
    ul > li:hover ul{
    visibility:visible;
    }

<body>
 <ul>
<li>First</li>
<li>
Second
<ul>
<li>Third</li>
</ul>
</li>
<li>Fourth</li>
</ul>
</body>

Answer 1

因为你隐藏了ul。不要使用可变性：这样隐藏，它会让你隐藏，对，但它仍然占用空间，所以它使你的第二个李比正常应该更大 - 检查元素，你会看到它 - 它看起来像第四个李在错误的地方看。

为了防止这种情况，您可以使用display：none with position：absolute，如下面的演示; display：none让你的第三个ul＆＃34;消失＆＃34 ;,使ul看起来正确，并且使用position：absolute，它会阻止第四个li运行（尝试删除属性position：absolute，你可以看到。

ul{
  width:350px;
  height:50px;
  padding-left:0;
  margin:0;
  background:#CCCCCC;
}
ul > li{
  list-style:none;
  display:inline;
  padding:10px 20px;
  font-size:24px;
  float:left;
  position: relative;
}
ul > li > ul{
  margin:10px 0px;
  padding-left:0;
  width:80px;
  height:40px;
  display:none;
  position:absolute;
}
ul > li > ul > li{
  display:block;
  list-style-type:none;
  padding-left:10px;
}
ul > li:hover ul{
  display:block
}

Demo

文字未与li ul中心对齐

1 个答案: