试图动态分解列表项目

-1

我试图在每次列表达到长度限制时填充一个无序的垂直列表，该列表将在下一行继续。但是，而不是简单地对下一行显示一个表项我想列表项突破，并继续像这样：试图动态分解列表项目

我不想和列要做到这一点，而在于它打破动态。

2017-05-02 ThisIsNotEddie

你现在有什么样的代码？ –

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

代码：

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

来源

2017-05-02 21:25:45 Jeppsen

-1

你可以使用css来改变项目的列表方式。

例：

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

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

来源

2017-05-02 21:08:44

'李'没有打破/包装在句子中。 – hungerstar

如何给自己的<ul>设置最大宽度，然后给你<li>display: inline;所以他们不会阻止元素了，敷像你想要的。然而，list-style-type不再适用于li，因为它们是内联元素。你仍然可以使用背景图像获得红色的子弹点，看起来你可能已经在做这个。

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

 
ul li { 
 
\t display: inline; 
 
}

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

来源

2017-05-02 21:09:07 StefanBob

试图动态分解列表项目

回答

相关问题