内联元素CSS

我希望在我的页面标题中有一个类似导航的结构，所以我决定使用一个内联列表，但是它产生的结果并不是我想象的那样。它将元素放置在3条单独的线上

Element 1    Element 2    Element 3

以上是我的目标，但目前我得到

Element 1
Element 2
Element 3

这是我的CSS和HTML片段：

CSS

HTML

---

谢谢。

将此添加到CSS中，用于您的LI的

li{ display:inline; }

---

使用内联块而不是内联块，也可以通过float使用它

通过内联块

#nav li {
    display: inline-block;
}

#nav {
      overflow:hidden;
}
#nav li {
      float:left; margin-right:10px;
}

通过浮动

#nav li {
    display: inline-block;
}

#nav {
      overflow:hidden;
}
#nav li {
      float:left; margin-right:10px;
}

使用

---

演示：

尝试使用以下方法：

#nav li {
    list-style: none;
    float: left;
    margin-right: 5px;
}

---

使用

float:left

或

float:right

并排对齐

#nav li { 

float:left;

}

---

您在

li

中有

按钮和
div
按钮，为
div
和
按钮提供
宽度

因为
div
是块级元素，如果不指定固定宽度，它将使用页面的所有
width

或

应用<代码>浮动：左到
li
也会起作用。
添加此CSS:

#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{display:inline; height:30px; float:left; list-style:none; margin-left:15px;}

对于不同的用户，结构是不同的。
检查链接：

你能发布你正在使用的HTML和CSS吗？你试过
display:inline
？我们需要查看你的HTML/CSS@ExplosionPills那么，我如何将中间元素居中呢？我有，它产生了我所说的，它产生的。谢谢！但是，现在如何单独修改元素的位置？我已经在li内浮动了元素，但仍然没有移动。ul所在的容器大小是否小于您想要的大小。。。？看我做的编辑……我怎么把中间元素放在页面中间呢？放在<代码>文本对齐：中心；代码>在该元素的代码中。中心与浮点对齐似乎有问题。。。实现“显示：内联块”；并在“#nav”上实现“文本对齐：中心”；它肯定会工作。。。
#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{display:inline; height:30px; float:left; list-style:none; margin-left:15px;}

<div id="nav">
   <ul>
       <li>
           <a href="#">Element <span>1</span></a>
           <div class="clr"></div>
       </li>
       <li>
           <a href="#">Element <span>2</span></a>
           <div class="clr"></div>
       </li>
        <li>
           <a href="#">Element <span>3</span></a>
           <div class="clr"></div>
       </li>
   </ul>
   <div class="clr"></div>
</div>

*{ matgin:0; padding:0}
ul, li{ list-style:none}
a{ text-decoration:none}
.clr{ clear:both;}
#nav{margin:auto; width:960px;}
#nav ul li{ float:left; margin-left:10px}
#nav ul li:first-child{ margin-left:0}
#nav ul li a{ display:block; background:#f00; color:#0F0; line-height:30px; text-align:center; width:70px; padding:0px 10px; font-weight:bold;}
#nav ul li a span{ display:block; float:right;}