在CSS中的下拉菜單之前和之后創建一個換行符
[英]creates a line break before and after drop down menu in css
問題描述
當我使用CSS創建下拉菜單時，它會在下拉菜單之前和之后生成換行符。這是html代碼
<body>
<!--nav class="navi"-->
<div class="navi" id="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Company Profile</a></li>
<li><a href="#">Core Values And Mission</a></li>
<li><a href="#">Strategy</a></li>
</ul>
</li>
<li><a href="#">Our Brands</a>
<ul>
<li><a href="#">HAMARA GLUCOSE D</a></li>
<li><a href="#">HAMARA HEALTH CARE PATENT PRODUCTS</a></li>
<li><a href="#">WAHT'S NEW</a></li>
</ul>
</li>
<li><a href="#">Nutrition Space</a>
<ul>
<li><a href="#">Product FAQ</a></li>
<li><a href="#">Health & Wellness</a></li>
</ul>
</li>
<li><a href="#">Media</a>
<ul>
<li><a href="#">News Paper Clippings</a></li>
<li><a href="#">Product Photos</a></li>
<li><a href="#">Founder which...</a></li>
</ul>
</li>
<li><a href="#">HSS</a></li>
<li><a href="#">Copackers & Investors</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!--/nav-->
</body>
這是CSS代碼
<style>
.navi ul li
{
float:left;
}
.navi ul li a
{
display:block;
padding: 10px;
text-decoration:none;
}
.navi ul li:hover > a
{
color:white;
}
.navi ul
{
display:inline-table;
list-style:none;
padding: 0 0px;
position:relative;
background:#C93;
}
.navi ul ul
{
display: none;
position:absolute;
}
.navi ul ul li
{
/*display:block;*/
float:none;
}
.navi ul li:hover > ul
{
display:block;
background:#FC0707;
}
</style>
所以我不想產生換行符
4 個解決方案
解決方案1
5 已采納 2013-07-31 11:04:02
*{
padding:0;
margin:0;
}
將此添加到樣式
解決方案2
0
如果指的第一層a刪除display:block; 從下面別的代碼，如果它是第二層a即菜單選項
嘗試改變
.navi ul li a {display：block; 填充：10px; 文字修飾：無; }
至
.navi ul li> a {display：block; 填充：10px; 文字修飾：無; }
我相信， block樣式也已應用於所有菜單項中a創建
解決方案3
0 2013-07-31 11:09:26
解決方案4
0 2013-07-31 11:13:28
它在哪里產生換行符？ 默認情況下，div的顯示類型是block，它占用其父級的100％寬度，並且顯然將內容向下推到流中它旁邊的位置。 您要在菜單之前還是之后添加內容？
#navi{
display: inline;
}
還可以使內容的display屬性之前和之后內聯（如果未指定width）或內聯塊（如果要指定width）。
創建下拉菜單的功能
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.