Question

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

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

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

Answer 1

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

这是你的CSS with float：left注释掉了：

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只会将文字换成空白字符。

Answer 2

如果您删除float: left;，那么它应该有用。

jsFiddle

作为一个FYI，当您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>

Answer 3

从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的{{1}}设置为0.然后，将ul属性添加到font-size。 http://jsfiddle.net/FsmcM/6/

Answer 4

您可以这样写：

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/

Answer 5

如果有以下更改，则看起来就像您的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;
}

另见my example。

是否可以显示<li>？</li>的一半

5 个答案: