简体   繁体   中英

<ul> <li> do make to rows of list

I Have 15 names, and what I want to do is to divde the names in three rows (5names on each row), at the moment Iam using <ul> and <li> tags

is there some possible way to have three rows 5 names on each row? using still the li and ul tags?

查找的方法列表做你想要的这里

This worked for me:
CSS:

.test {
    padding:0;
    margin:0;
    list-style-type:none;
    width:500px;
}
.test li {
    width:100px;
    float:left;
}

HTML:

<ul class="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>

确保float: left并将li width to 20%设置为总宽度的li width to 20% (可能略小)。

You could use a nested list. CSS allows lists to be made inline by using display: inline and list-style-type: none . If you give every li element to be listed horizontally these properties you can list them side by side.

Hope this helps

James

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM