0

当我使用 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

4 回答 4

5 
   *{
        padding:0;
        margin:0;   
    }

将此添加到样式

于 2013-07-31T11:04:02.447 回答
0

它在哪里产生换行符？默认情况下，div 显示类型是块，它占用其父级的 100% 宽度，并且显然将内容向下推到流中它旁边。您想在菜单前后添加内容吗？

#navi{
  display: inline;
}

还将内容的显示属性前后设置为内联（如果未指定宽度）或内联块（如果要指定宽度）。

于 2013-07-31T11:13:28.107 回答
0

尝试使用 white-space 属性

将此分配给div：

.navi
{
     white-space: nowrap;
}

更多示例

于 2013-07-31T11:09:26.437 回答
0

如果您的意思是从下面的代码中a删除的第一层，display:block;否则如果它是a即菜单选项的第二层

尝试改变

.navi ul li a { 显示：块；填充：10px；文字装饰：无；}

至

.navi ul li > a { 显示：块；填充：10px；文字装饰：无；}

我相信该block样式也已应用于所有a 在菜单选项中创建中断

于 2013-07-31T11:06:04.813 回答