<ul> <li>不会横向走

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