1

使用<ul>+ <li>：http: //jsfiddle.net/FsmcM/

使用<div>+ <span>：http: //jsfiddle.net/z47LM/

是否可以显示一半<li>？（如<div>+ <span>）

4

5 回答 5

3

float:left从http://jsfiddle.net/FsmcM/2/中删除li 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <body>
  <ul>
    <li>1234567890</li>
    <li>1234567890</li>
    <li>1234567890</li>
  </ul>
 </body>
</html>

这是您的带有 float:left 注释的 CSS：

ul{
    border:1px solid blue;
    width:230px;
    overflow:hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li{
    /*float:left;*/
    border:1px solid red;
    height:20px;
    display:inline;
    word-break:break-all;
}​

请注意，IE 只会将文本换行在空白字符处。

于 2012-05-15T06:20:43.640 回答
2

如果您删除它，float: left;那么它应该可以工作。

js小提琴。

作为一个仅供参考，你不需要向左浮动display:inline;

ul{
    border:1px solid blue;
    width:230px;
    overflow:hidden;
    list-style: none;
    margin: 0;a
    padding: 0;
}
ul li{
    border:1px solid red;
    height:20px;
    display:inline;
    word-break:break-all;
    word-break: break-all;
}​

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <body>
  <ul>
    <li>1234567890</li>
    <li>1234567890</li>
    <li>1234567890</li>
  </ul>
 </body>
</html>
​
于 2012-05-15T06:22:05.023 回答
2

只需float: left从ul li. li但是，如果您这样做，您可能会注意到每个元素之间有一点空格。这是因为 HTML 在li标签之间有一些空格。

<ul>
... <li>A</li>
... <li>B</li>
</ul>
<!-- "..." denotes the spaces I'm talking about -->

要删除这些空格，您可以：

  • 从 HTML 中删除空格，这当然会影响源代码的可读性。
  • 或者，将font-size父级 ( ul) 的 设置为 0。然后，将font-size属性添加到li. http://jsfiddle.net/FsmcM/6/
于 2012-05-15T06:24:14.000 回答
1

你可以这样写：

ul {
    border:1px solid blue;
    width:230px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space:nowrap;
    font-size:0;
}
ul li {
    display:inline-block;
    *display:inline; /*For IE*/
    *zoom:1;
    white-space:noraml;
    font-size:16px;
    border:1px solid red;
    height:20px;
    display:inline;
    word-break:break-all;
}

检查这个http://jsfiddle.net/FsmcM/1/

于 2012-05-15T06:18:06.897 回答
1

通过以下更改，它看起来像您的div示例span：

html:

<ul>
    <li>1234567890</li><li>1234567890</li><li>1234567890</li>
</ul>

CSS：

ul{
    border:     1px solid blue;
    width:      210px;
    list-style: none;
    margin:     0;
    padding:    0;
}
li{
    border:  1px solid red;
    height:  20px;
    display: inline;
}

另请参阅我的示例。

于 2012-05-15T06:22:49.203 回答