Question

您好，我正在将这些内容添加到<li>个标签中，并且它会在另一个之下。但我想让它像这样排成一行......

    Home  aboutus  contactus  ourservices

这是我的HTML

<ul class="ddbar" id="ddbar">
<li class="topmenu" menu_id="0" style="padding: 0em 44.0714px;">
<a href="http://localhost" class="baritem">Home</a>
</li><li class="topmenu" menu_id="1" style="padding: 0em 15.0714px;">
<a href="#" class="baritem">Communities</a>
</li><li class="topmenu" menu_id="2" style="padding: 0em 8.57143px;">
<a href="#" class="baritem">Gallery</a>
</li><li class="topmenu" menu_id="3" style="padding: 0em 32.0714px;">
<a href="#" class="baritem">Bash</a>
</li><li class="topmenu" menu_id="4" style="padding: 0em 0.0714286px;">
<a href="#" class="baritem">Videos</a>
</li><li class="topmenu" menu_id="5" style="padding: 0em 18.0714px;">
<a href="#" class="baritem">Services</a>
</li><li class="topmenu" menu_id="6" style="padding: 0em 6.07143px;">
<a href="#" class="baritem">Create account</a>
</li>
</ul>

Answer 1

要使list元素位于同一行，您必须修改其display属性。您也可以避免渲染子弹按钮;在这种情况下，您必须将根列表元素的list-style设置为none。

ul#ddbar {
  list-style: none;
}

ul#ddbar li {
  display: inline-block;
  
  padding: 4px 10px;
  background-color: #EEE;
  border-radius: 5px;
}

<ul id="ddbar">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Answer 2

如果您想排列display: inline-block;元素，则需要使用li，另一方面，您也可以使用float: left;

如果您有兴趣重新考虑一下代码，那么您可以在每个li和a上调用课程，您可以将这些元素作为目标，例如

ul.ddbar li {
   /* Styles */
}

ul.ddbar li a {
   /* Styles */
}

通过这种方式，您不必为每个元素调用类，因为每种类型的元素的所有类都相同

注意：就此属性menu_id="2"而言，它是无效的标记，我假设您的代码是动态生成的，并且您没有太多关注＆gt;它，如果你有，也考虑删除内联样式，如果你使用ul元素的id，你真的没有必要调用一个类，使用ul#ddbar {}将给你相同的结果

Demo（inline-block示例）

Demo（float示例）

Answer 3

给LI留下一个浮动：

#ddbar li{
           float:left;
          }

Answer 4

ul#ddbar {
    list-style: none;
}
ul#ddbar li {
    display: inline-block;
    float: left;
}

现场演示可以在http://jsfiddle.net/6EZaQ/

看到

Answer 5

有几种方法可以做到这一点：

方法1：浮动列表项

li { float:left; }

方法2和3：显示与彼此一致的列表项

li { display:inline; }
/* OR, if you want more flexibility: */
li { display:inline-block; }

有关差异的信息，请参阅this question's most voted answer。

方法4：将列表显示为表格

ul { display:table; }
li { display:table-cell; }

All 4 methods in one JSFiddle example

作为旁注，关于您当前加价的几点：

<li ... menu_id="1" style="padding: 0em 15.0714px;" ...>

menu_id不是有效的属性。如果你想使用这样的自定义属性，你应该使用data-* attributes - 所以data-menuid="0"就足够了。
0em与0相同。在处理值0时，您无需指定单位。

Answer 6

我通常会在LI上使用float：left，有时候我会使用display：inline-block。但您也可以使用display：table（虽然默认情况下会将菜单分散在整个页面上）：

#ddbar {
    list-style: none;
    display: table;
}

#ddbar li {
    display: table-cell;
}

Answer 7

只需添加此项即可达到您的目的： -

 #ddbar li {
 float:left; 
 }

Answer 8

只需使用

#ddbar {
    display:inline-block;
   }

如何在行中显示<li> </li>元素

8 个答案: