nav_wrapper ul li {

Question

好的，大家好，我现在真的很困惑。我的 CSS和HTML 代码如下。

CSS - ：

 #nav_wrapper ul li{

         //float: left;
         padding-left: 70px;
         position: relative;
         left: 33px;
         display: inline;


     }
     #nav_wrapper ul li a{

         text-decoration: none;
         //display: block;
         border: 1px solid black;

     }

以下是我的HTML代码 - ：

<div id="nav_wrapper">
                   <ul>
                       <li><a href="#">ELECTRONICS</a> </li> 
                       <li><a href="#">APPLIANCES</a></li>
                       <li><a href="#">MEN</a></li>
                       <li><a href="#">WOMEN</a></li>
                       <li><a href="#">BABY&KIDS</a></li>
                       <li><a href="#">HOME&FURNITURE</a></li>
                       <li><a href="#">BOOKS&MORE</a></li>

                   </ul>

           </div>

现在我的问题是当我在display: inline;使用#nav_wrapper ul li所有 li 元素时，将它们自动对齐水平。然后当我写{ {1}}（现在评论）display: block;（现在评论）他们将自己与垂直对齐。如果我发表评论#nav_wrapper ul li a并从{{1}移除评论他们再次水平对齐它们。它怎么工作?????

我的观点是：

显示：内联; 和 float：left; 属性如何使用display: inline;自行调整它们，或者我做错了什么？

Answer 1

基本上HTML中有两种类型的元素。

阻止类型
内联

锚标记（a）是内联元素。所以当你使用＆＃39; display：block;＆＃39;在Anchor标签（a）中，它的行为类似于块类型元素，与其他Block类型元素一样，它占据整个宽度，看起来像垂直对齐。因此，请使用以下代码，希望它会有所帮助 -

#nav_wrapper ul li {

     display: inline;

 }

#nav_wrapper ul li a {

     text-decoration: none;
     border: 1px solid black;
     padding: based on your design;
     margin: based on your design;
 }

Answer 2

通常列表（li）垂直显示。但是当我们必须水平排列列表（li）时，我们可以将显示属性设置为内联，或者可以给float：left。通常，div等块元素垂直显示。如果我们想要将它们排列在水平方向，我们可以将样式设为显示：内联或左侧浮动。请浏览我之前发布的链接，了解显示属性。

Answer 3

nav_wrapper ul li {

     float: left;
     padding-left: 70px;
     position: relative;
     left: 33px;
     display: inline-block;


 }
 #nav_wrapper ul li a{

     text-decoration: none;
     border: 1px solid black;

 }

//尝试上面的代码

如何浮动：离开;和显示：内联;属性调整显示：阻止;？

3 个答案:

nav_wrapper ul li {