下拉菜单中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元素之间没有空格

回答

相关问题