Question

我有一个清单，会发生什么：

短项------------------------ | （ul div的结尾）
短项目
短项目真的真的很长项目

是否可以使li缩小的宽度适合两条线或使li断裂为两条？像这样：

真的非常真实非常长的项目

让它看起来更均匀？或者用css是不可能的？

编辑：

它是一个常规的ul li列表（由网站生成），单级。没什么特别的。我只是不喜欢这种效果，因为他们（李的）颜色与包含列表的div的颜色不同，所以每个li都有一个适合它的盒子，以及真正长的项目＆＃39;当只有一两个溢出的单词时，s框会关闭。

我想我必须找到一种方法来使用jquery或其他东西。设置宽度或最大宽度没有帮助，已经存在一个甚至更长的项目将创建不必要的行数。

Answer 1

我会尝试在UL上放一个宽度，使其包含Li

这里有一个让你玩css的工具我在这里尝试过，似乎缩小了所有的li的

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100px;
}

li {
  float: right;

}

a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>

Answer 2

我认为只有css才能将li分成两个相等的部分，但您可以将max-width属性设置为li，这将限制列表的宽度。

<强> HTML：

<ul>
    <li>short item</li>
    <li>short item</li>
    <li>short item</li>
    <li>really really really really long item</li>
</ul>

<强>的CSS：

li {
    max-width: 150px;
}

演示： http://jsfiddle.net/557t6p0k/

Answer 3

尝试添加width=10% <ul> tag <ul="10%"><ul/ul>，{{1}}并稍微使用该数字

当单词溢出时，是否可以将ul list li项分成两个相等的部分？

3 个答案: