是否可以显示的一半？

Using <ul> + <li> : http://jsfiddle.net/FsmcM/

使用

:http://jsfiddle.net/FsmcM/

Using <div> + <span> : http://jsfiddle.net/z47LM/

使用

+ :http://jsfiddle.net/z47LM/

Is it possible to display half of the <li>? (like <div> + <span>)

是否可以显示

的一半? (比如

+ )

的一半? (比如+)

5 个解决方案

#1

If you remove the float: left; then it should work.

如果你删除浮动:左;那它应该工作。

jsFiddle.

as an FYI, you don't need to float left when you display:inline;

作为一个FYI,当您显示时,您不需要向左浮动:内联;

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>

#2

remove float:left from the li http://jsfiddle.net/FsmcM/2/

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

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

And here is your CSS with float:left commented out:

这是你的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;
}

note that IE will only wrap the text at whitespace characters.

请注意,IE只会将文本换成空白字符。

#3

Just take out the float: left property from ul li. However, if you do that you might notice there's a bit of a space between each li element. This is because the HTML has some spaces between the li tags.

从ul li中取出float:left属性。但是,如果你这样做,你可能会注意到每个li元素之间有一点空间。这是因为HTML在li标签之间有一些空格。

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

To remove these spaces, you can either:

要删除这些空格,您可以:

Remove the spaces from the HTML, this will have an impact on the source code readability of course.

从HTML中删除空格,这将对源代码可读性产生影响。

Or, set the font-size of the parent (ul) to 0. Then, add a font-size property to the li. http://jsfiddle.net/FsmcM/6/

或者,将父级(ul)的font-size设置为0.然后,向li添加font-size属性。 http://jsfiddle.net/FsmcM/6/

#4

With following changes it looks like your div and span example:

通过以下更改,它看起来像您的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;
}

Also see my example.

另见我的例子。

#5

You can write like this:

你可以像这样写:

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

Check this http://jsfiddle.net/FsmcM/1/

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

#1