0

Hi i am adding this content to <li> tags and it is coming one below the other.But i want it to come in one line like this...

    Home  aboutus  contactus  ourservices

here is my 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>
4

8 回答 8

4

为了使列表元素位于同一行，您必须修改它们的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>

于 2013-05-23T10:09:22.247 回答
2

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

如果您有兴趣重新考虑您的代码，您将在每个上调用类，li并且a您可以在其中定位这些元素，例如

ul.ddbar li {
   /* Styles */
}

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

这样，您不必在每个元素上调用类，因为每种类型的元素的所有类都是相同的

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

演示（inline-block示例）

演示（float示例）

于 2013-05-23T10:10:06.083 回答
1

给 LI 一个浮点数：

#ddbar li{
           float:left;
          }
于 2013-05-23T10:11:23.003 回答
1 
ul#ddbar {
    list-style: none;
}
ul#ddbar li {
    display: inline-block;
    float: left;
}

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

于 2013-05-23T10:12:17.653 回答
1

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

方法一：浮动列表项

li { float:left; }

方法二和三：列表项相互对齐显示

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

有关差异的信息，请参阅此问题的投票最多的答案。

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

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

一个 JSFiddle 示例中的所有 4 种方法。

作为旁注，关于您当前标记的几点：

<li ... menu_id="1" style="padding: 0em 15.0714px;" ...>
  1. menu_id不是有效的属性。如果你想使用这样的自定义属性，你应该使用data-*属性——这样data-menuid="0"就足够了。
  2. 0em是一样的0。处理 0 值时不需要指定单位。
于 2013-05-23T10:15:22.067 回答
0

只需使用

#ddbar {
    display:inline-block;
   }
于 2013-05-23T17:24:51.110 回答
0

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

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

#ddbar li {
    display: table-cell;
}
于 2013-05-23T10:16:31.677 回答
0

只需添加它就可以达到您的目的：-

 #ddbar li {
 float:left; 
 }
于 2013-05-23T10:18:10.763 回答