当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Same height li in multicolumn ul

问题描述:

I have created a muticolumn ul

The HTML:

<ul>

<li>Antelope</li>

<li>Bison</li>

<li>Camel</li>

<li>Deer</li>

<li>Eland</li>

<li>Gazelle</li>

</ul>

The CSS:

 ul {

float: left;

width: 12em;

margin: 0;

padding: 0;

list-style: none;

}

li {

float: left;

width: 6em;

margin: 0;

padding: 0;

}

Now if I add some more text in second li (or any li in second column) the whole row automatically resizes (height of row resizes). But if I add more text in first li (or any li in first column), whole row does not resize.

I want whole row to be resized if text is added or reduced in any li.

I copied above code from this link. You can see how multiple column ul works

网友答案:

Maybe add:

li:nth-child(odd){clear:left;}

to your CSS?

(This assumes you'll only ever want 2 columns)

分享给朋友:
您可能感兴趣的文章:
随机阅读: