Question

我试图填写每次列表达到长度限制时在下一行继续的无序垂直列表。但不是简单地在下一行显示下一个列表项，而是希望列表项中断并继续如下：

我不想用列做这个，而是动态地打破。

Answer 1

也许这样可以使列表水平并创建自己的自定义列表样式类型？

代码：

<style>

ul {
    list-style-type: none;
    text-align: center;
    width: 450px;
}

li {
    display: inline;
}

li:before {
    content: "\2022";
    margin-right: 2px;
}

</style>

<ul>
    <li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
    <li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
    <li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
    <li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
    <li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
    <li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
    <li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
    <li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
</ul>

Answer 2

如何为<ul>设置最大宽度设置，然后提供<li> display: inline;，以便他们不再阻止元素并按照您的需要进行换行。但是，list-style-type不再适用于li，因为它们是内联元素。你仍然可以使用背景图像获得红色子弹点，看起来你可能已经在做这个了。

＆＃13;

ul {
  max-width: 220px;
  list-style-type: disc;
  
}

ul li {
	display: inline;
}

＆＃13;

<ul>
	<li>Hey there this is a pretty long sentence</li>
	<li>Hey there this is a pretty long sentence</li>
	<li>Hey there this is a pretty long sentence</li>
	<li>Hey there this is a pretty long sentence</li>
</ul>

＆＃13;

Answer 3

您可以使用css更改列出项目的方式。

例如：

＆＃13;

ul {
    width: 250px;
    display: inline-block;
}
li {
    float: left;
    margin-left: 20px;
}

＆＃13;

<html>
    <body>
      <ul>
        <li>item 1</li>
        <li>item 1 item 2</li>
        <li>item 1 item 2 item 3</li>
        <li>item n</li>
      </ul>
    </body>
</html>

＆＃13;

试图动态分解列表项

3 个答案: