float：left;並顯示：內聯;屬性調整與顯示：塊;？

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代碼（Code）：

<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> 

現在我的問題是，當我在#nav_wrapper ul li使用display: inline;所有李元素將它們對齊自我橫向。然後當我寫display: block;在#nav_wrapper ul li a（註釋現在）（評論現在）他們對準他們自我垂直。現在如果我評論display: inline;和//float: left;。他們刪除註釋對齊它們自身水平again.How是它的工作?????

我的觀點IS-：

如何顯示：內聯;和float：left;屬性正在調整他們與//display: block;自我或我做錯了什麼？

Answer 1

nav_wrapper UL李{

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


} 
#nav_wrapper ul li a{ 

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

} 

//嘗試上述代碼

Answer 2

通常列表（LI）垂直顯示。但是當我們必須水平排列列表（li）時，我們可以將display屬性設置爲內聯或者可以給float：left。通常像div這樣的塊元素是垂直顯示的。如果我們想要橫向排列它們，我們可以給出樣式作爲顯示：內聯或浮動爲左。請通過我以前發佈的鏈接瞭解顯示屬性。

Answer 3

基本上HTML中有兩種類型的元素。

1. 塊類型
2. 內嵌

錨標籤（a）是內聯元件。所以當你使用'display：block'時在錨標記（a）中，它的行爲與塊類型元素相似，並且與其他塊類型元素一樣，它佔用全部寬度，並且看起來像垂直對齊。因此，使用下面的代碼，並希望這將是有益的 -

#nav_wrapper UL李{

 display: inline; 

} 

#nav_wrapper UL李一{

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