javascript liste sur plusieurs lignes

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 9 年前。

Improve this question

我有一个动态创建的 div 中包含的项目列表。不幸的是，当列表太长时，它会溢出 div。有没有办法在列表溢出时获取换行符？

CSS:

div.StdDiv{
    width: 30%;
    background-color: #ffcc00;
    text-align: center;
    font-size: 100%;
    color: #000000;
    padding: 0.5em;
    border: 1px solid #ccc;
    margin-bottom: 1px; 
    }
ul.boxy {        
    list-style:none;
    padding: 0px;
    margin: 0px;
    height: auto;        
    text-align: center;
    }

ul.boxy li {
    cursor:move;
    display:inline;       
    margin-right: 2px;
    margin-bottom: 2px;
    padding:2px 6px 2px 6px;
    border: 1px solid silver;
    background-color: #eee;
    font-size: 100%;
    }

HTML:

<div id="divListMots" class="StdDiv">
<span id="ListMots">la la lere</span>
</div>

JavaScript:

var numlist = ['0','1','2','3','4','5','6','7','8','9'];
var textlist = ['li0','li1','li2','li3','li4','li5','li6','li7','li8','li9'];
var ListMots ='';
var ListOfWordsStart = '<ul class="boxy" id="ul">&#160;&#160; ';
var ListOfWordsEnd = '</ul>';
var LiWordStart = '<li id="box' ;
var LiWordEnd = ' " class="">' ;
var LiWord ='';
var sep = '&#160;&#160;&#160;&#160;';
var Output = '';

for (var k=0; k<numlist.length; k++) // pour tous les trous
{   
var num = numlist[k];
var WordText = textlist[num];
LiWord = LiWordStart + num +  LiWordEnd + WordText +'</li>' + sep;
Output = Output + LiWord ;
}
ListOfWords = ListOfWordsStart + Output + ListOfWordsEnd;
document.getElementById('ListMots').innerHTML = ListOfWords;

jsfiddle

Answer 1

英语问题:

Hello,

I have a list of items contained in a dynamically created div. Unfortunately when the list is too long, it overflows the div. Is there a way to get a newline when the list overflows?

实现这一点的最简单方法是使用

display: inline-block;

而不是

display: inline;

新的CSS:

ul.boxy li {
    cursor:move;
    display:inline-block;       
    margin-right: 2px;
    margin-bottom: 2px;
    padding:2px 6px 2px 6px;
    border: 1px solid silver;
    background-color: #eee;
    font-size: 100%;
}

Updated jsFiddle

但是，您应该注意，这可能不适用于较旧的浏览器。