Question

我有一个ul我想横向但它不起作用。下面是代码：

HTML：

<ul id="ul_text">
<li>
<h2>Text</h2>
<p>....</p>
</li>
<li>
<h2>text</h2>
<p>....</p>
</li>
</ul>

的CSS：

#ul_text {
list-style-type: none; display:inline; }

#ul_text li{
border-right: 1px solid #ffffff; width:260px; }

然而这不起作用！我做错了什么？

Answer 1

您可以尝试浮动li元素：

#ul_text li {
  border-right: 1px solid #ffffff; 
  width:260px; 
  float: left;
}

或添加：list-style-type: none;以及将display: inline切换为li元素，如已建议的那样。

#ul_text li {
  border-right: 1px solid #ffffff; 
  width:260px; 
  display: inline; 
  list-style-type: none;
}

Answer 2

您需要将display: inline放在li而不是ul上，如下所示：

#ul_text {
  list-style-type: none;
}

#ul_text li {
  border-right: 1px solid #ffffff; 
  width:260px; 
  display:inline;
}

Answer 3

以下是一个快速示例：http://css.maxdesign.com.au/listamatic/horizontal01.htm

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Answer 4

添加

float:left;

到

#ul_text {list-style-type:none; }

<ul> <li>不会横向</li> </ul>

4 个答案: