下拉菜單中li元素之間沒有空格

我在css中創建了一個下拉菜單，我無法在下拉元素之間添加空格。他們崩潰了。有代碼：jsfiddle 下拉菜單中li元素之間沒有空格

有CSS部分。我嘗試了不同的事情來解決它。

* 
{ 
    margin:0px; 
} 
html,body 
{ 
    height:100%; 
} 
.wrapper 
{ 
    height:100%; 
    min-height:100%; 
    height:auto !important; 
    margin:0 auto -50px; 
} 
.footer,.push 
{ 
    height:50px; 
} 
.footer 
{ 
    background-color:lightblue; 

} 
.footer center 
{ 
     vertical-align:middle; 
} 
.header 
{ 
    margin-top:10px; 
    height:150px; 
} 
#meniu li 
{ 
    padding:5px; 
    border:1px solid black; 
    border-radius:10px; 
    display:inline; 
} 
#meniu 
{ 
    margin-top:5px; 
    background-color:lightblue; 
    width:100%; 
    height:50px; 
} 

#meniu a 
{ 
    text-decoration:none; 
} 
.dropdown-content { 
    display: none; 
    position: absolute; 
    width:100%; 
    margin:0px; 
} 
.dropdown-content ul 
{ 
    height:100%; 
    width:100%; 
    position:relative; 
    list-style-type:none; 
    margin-top:20px; 
    left:-25%; 
} 
.dropdown-content li 
{ 
    position:relative; 
} 
.dropdown { 
    position: relative; 
    display: inline-block; 

} 

.dropdown:hover .dropdown-content { 
    display: block; 

}

還有就是在HTML：

<body> 
     <div class="wrapper"> 
      <div class="header"> 
      <div id="meniu"> 
       <ul> 
        <li>PRIMA PAGINA</li> 
        <div class="dropdown"><li>FISIERELE MELE<div class="dropdown-content"> 
          <ul> 
           <li>MENIUL MEU</li> 
           <li>PLANETE NOI</li> 
          </ul> 
         </div> 
        </div></li> 

        <li>MENIUL MEU</li> 
        <li>PLANETE NOI</li> 
       </ul> 
      </div> 
      </div> 
      <div class="push"></div> 
     </div> 
     <div class="footer"><center>Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015</center></div>

來源

2016-05-15 MihaiMacarie

請避免使用'

'標記，它被**棄用**。你可以在CSS中使用'text-align：center'來代替或者使用'margin：0 auto'來使塊級元素居中。 – Aziz

我做在CSS下拉菜單，我不能在下拉列表中的元素之間添加空間。他們崩潰了。

他們崩潰因爲你已經使他們如inline元素。我想你的意思是inline-block，否則填充/保證金不會正確渲染。

正確的代碼應該是：

#meniu li { 
    ⋮ 
    display: inline-block; /* make `li` as inline-blocks */ 
    margin-bottom: 10px; /* add spacing */ 
}

也有一定的HTML語法錯誤（額外li），請通過驗證程序運行它。我的最終結果是：

* { margin: 0px; } 
 

 
html, body { height: 100%; } 
 

 
.wrapper { 
 
    height: 100%; 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    margin: 0 auto -50px; 
 
} 
 

 
.footer, .push { height: 50px; } 
 

 
.footer { background-color: lightblue; text-align: center; } 
 

 
.header { margin-top: 10px; height: 150px; } 
 

 
#meniu li { 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    border-radius: 10px; 
 
    display: inline-block; 
 
    margin-bottom: 10px; 
 
} 
 

 
#meniu { 
 
    margin-top: 5px; 
 
    background-color: lightblue; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
#meniu a { 
 
    text-decoration: none; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 

 
.dropdown-content ul { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: relative; 
 
    list-style-type: none; 
 
    margin-top: 20px; 
 
    left: -25%; 
 
} 
 

 
.dropdown-content li { 
 
    position: relative; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <div class="header"> 
 
    <div id="meniu"> 
 
     <ul> 
 
     <li>PRIMA PAGINA</li> 
 
     <div class="dropdown"> 
 
      <li>FISIERELE MELE 
 
      <div class="dropdown-content"> 
 
       <ul> 
 
       <li>MENIUL MEU</li> 
 
       <li>PLANETE NOI</li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
     <li>MENIUL MEU</li> 
 
     <li>PLANETE NOI</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="push"></div> 
 
</div> 
 

 
<div class="footer"> 
 
    Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015 
 
</div>

的jsfiddle：https://jsfiddle.net/azizn/snL1gwsm/

來源

2016-05-15 21:41:08 Aziz

希望我理解正確你的問題...... 我做了一些下拉欄爲您服務。您可以根據需要添加元素，查看html文件和css，它可以幫助您瞭解正在發生的事情。看看:)

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover {background-color:lightblue} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div>

來源

2016-05-15 21:40:43

你在你的HTML有一個錯誤

<div class="wrapper"> 
     <div class="header"> 
     <div id="meniu"> 
      <ul> 
       <li>PRIMA PAGINA</li> 
       <div class="dropdown"> 
       <li>FISIERELE MELE 
       <div class="dropdown-content"> 
         <ul> 
          <li>MENIUL MEU</li> 
          <li>PLANETE NOI</li> 
         </ul> 
        </div> 
       </div> 
       </li> 

       <li>MENIUL MEU</li> 
       <li>PLANETE NOI</li> 
      </ul> 
     </div> 
     </div> 
     <div class="push"></div> 
    </div> 
    <div class="footer"><center>Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015</center></div>

https://jsfiddle.net/ggtpufuw/1/

固定HT後毫升你必須讓你的列表顯示爲內聯塊，並保留他們，只要你喜歡。

#meniu li 
{ 
    padding:5px; 
    border:1px solid black; 
    border-radius:10px; 
    display:inline-block; 
    margin-top:10px; 
}

來源

2016-05-15 21:55:34

下拉菜單中li元素之間沒有空格

回答

相關問題