Javascript 在css下拉菜单之前和之后创建换行符_Javascript_Html_Css_Drop Down Menu

Javascript 在css下拉菜单之前和之后创建换行符

javascript html css drop-down-menu

Javascript 在css下拉菜单之前和之后创建换行符,javascript,html,css,drop-down-menu,Javascript,Html,Css,Drop Down Menu,当我使用css创建一个下拉菜单时，它会在下拉菜单前后生成一个换行符下面是html代码 <body>  <div class="navi" id="navi"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a>

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


李国荣先生
{
浮动：左；
}
纳维·乌尔·李先生
{
显示：块；
填充：10px；
文字装饰：无；
}
.navi ul li:悬停>a
{
颜色：白色；
}
美国海军航空公司
{
显示：内联表；
列表样式：无；
填充：0 0px；
位置：相对位置；
背景：C93；
}
美国海军
{
显示：无；
位置：绝对位置；
}
李纳维
{
/*显示：块*/
浮动：无；
}
.navi ul li:悬停>ul
{
显示：块；
背景#FC0707；
}

所以我不想生成换行符

   *{
        padding:0;
        margin:0;   
    }

将此添加到样式中

如果您指的是

remove

display:block的第一层，请将其添加到样式中如果是a
的第二层，即菜单选项
试试chaning
纳维·乌尔·李先生{
显示：块；
填充：10px；
文本装饰：无；}
到
.navi ul li>a{
显示：块；
填充：10px；
文本装饰：无；}
我相信block
样式已经应用到所有a
菜单选项中，如果您指的是a
的第一层，则在菜单选项中创建一个中断如果是a
的第二层，即菜单选项
试试chaning
纳维·乌尔·李先生{
显示：块；
填充：10px；
文本装饰：无；}
到
.navi ul li>a{
显示：块；
填充：10px；
文本装饰：无；}
我相信block
样式已经应用到所有a
菜单选项中，在菜单选项中创建一个中断
尝试使用空白属性
将其分配给div：
.navi
{
     white-space: nowrap;
}

尝试使用空白属性
将其分配给div：
.navi
{
     white-space: nowrap;
}

它在哪里生成换行符？默认情况下，div显示类型为block，其宽度为其父级的100%，并且在流中明显向下推送它旁边的内容。
是否要在菜单前后添加内容
#navi{
  display: inline;
}

还可以将内容的“显示前后”属性设置为“内联”（如果未指定宽度）或“内联块”（如果要指定宽度）。在何处生成换行符？默认情况下，div显示类型为block，其宽度为其父级的100%，并且在流中明显向下推送它旁边的内容。
是否要在菜单前后添加内容
#navi{
  display: inline;
}

另外，将内容的“显示前后”属性设置为“内联”（如果未指定宽度）或“内联块”（如果要指定宽度）。
您已经尝试了哪些方法来解决此问题？你在上飞行课吗？这里有一个问题：问题是什么？我没有看到任何。。。你在开发什么浏览器？我现在知道了…临时修复程序可能是设置行距换行符
=空白=边距
，或者有时是CSS术语中的填充
：p你已经尝试解决这个问题了吗？你在上飞行课吗？这里有一个问题：问题是什么？我没有看到任何。。。你在开发什么浏览器？我现在知道了…临时修复程序可能是设置行距换行符
=空白=边距
，或者有时是CSS术语中的填充
：这是一个很好的实践，但不是解决方案。我认为这正是问题所在，如果“换行符”from OP=上下边距..使用会更好practice@deathApril，误解了这个问题。这就是解决办法+1.好的做法，但不是解决办法。我想这正是问题所在，如果OP=上下边距的“换行符”，使用它会更好practice@deathApril，误解了这个问题。这就是解决办法+1.静止线空间静止线空间静止线空间