开发者

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

开发者 https://www.devze.com 2023-01-24 15:32 出处:网络
I Have 15 names, and what I want to do is to divde the n开发者_开发技巧ames in three rows (5names on each row), at the moment Iam using <ul> and <li> tags

I Have 15 names, and what I want to do is to divde the n开发者_开发技巧ames 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?


Find a list of methods do to what you want here.


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>


Make sure to float: left and set the li width to 20% of your total width (maybe slightly less).


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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号