Question

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

Element 1    Element 2    Element 3

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

Element 1
Element 2
Element 3

这是我的CSS和HTML代码段：

CSS

#nav li {
    display: inline;
}

HTML

<ul id="nav">
    <li><button id="left_nav"><</button></li>
    <li><div id="day">Monday</div></li>
    <li><button id="right_nav">></button></li>
</ul>

感谢。

Answer 1

使用inline-block而不是inline，你也可以使用float ...

通过内联块，

#nav li {
    display: inline-block;
}

通过 Float ，

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

Answer 2

尝试使用以下内容：

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

Answer 3

将此添加到您的LI的CSS ......

li{ display:inline; }

Answer 4

使用

#nav li {
    display: inline-block;
}

演示：Fiddle

Answer 5

使用float:left或float:right并排排列

#nav li { 

float:left;

}

Answer 6

buttons内div和li width div button div和width。{/ p>

因为float: left;是块级元素，如果你没有指定固定宽度，它会使用页面的li。

或

将{{1}}应用于{{1}}也适用。

Answer 7

添加此CSS：

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

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

Answer 8

不同用户的结构不同。检查链接：http://jsfiddle.net/wWyMW/1/

<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>

和CSS：

*{ 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;}

内联元素CSS

8 个答案: