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
精彩评论