0

我想在我的页面标题中使用类似导航的结构，所以我决定使用内联列表，但是它产生的结果不是我想象的那样。它将元素放在 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>

谢谢。

4

8 回答 8

1

使用 inline-block 代替 inline，您也可以通过 float 使用它...

通过内联块，

#nav li {
    display: inline-block;
}

通过浮动，

#nav {
      overflow:hidden;
}
#nav li {
      float:left; margin-right:10px;
}
于 2013-03-20T04:54:03.770 回答
1

尝试使用以下内容：

#nav li {
    list-style: none;
    float: left;
    margin-right: 5px;
}
于 2013-03-20T04:54:59.070 回答
0

你有并且buttons在div内部li给予width，这将起作用。divbutton

因为div是块级元素，width如果您不分配固定宽度，它会使用所有页面。

或者

适用float: left;于li那也将起作用。

于 2013-03-20T04:56:31.757 回答
0

添加这个CSS：

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

#navigation ul li
{display:inline; height:30px; float:left; list-style:none; margin-left:15px;}
于 2013-03-20T04:58:29.087 回答
0

对于不同的用户，结构是不同的。检查链接：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;}
于 2013-03-20T05:06:45.793 回答
0

利用

#nav li {
    display: inline-block;
}

演示：小提琴

于 2013-03-20T04:54:48.327 回答
0

并排使用float:left或对齐float:right

#nav li { 

float:left;

}
于 2013-03-20T04:55:27.040 回答
0

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

li{ display:inline; }
于 2013-03-20T04:50:44.750 回答