li下几个元素横排,该怎么解决

2012-02-14

li下几个元素横排HTML code!DOCTYPE htmlhtmlheadmeta http-equivContent-Type contenttext/h

li下几个元素横排

HTML code

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>例子</title><style>body{    margin:0;    padding:0;    color:#666;    font:12px/1.5 arial;}</style><script>window.onload = function() {    var oBox = document.getElementById("mainBox"),    aLi = oBox.getElementsByTagName("li"),    i = 0;    for(;i < aLi.length; i++) {        (function(s) {            !!(i%5) || (s.color = "red", s.fontSize = "16px", s.fontWeight = "700", !!i && (s.marginTop = "20px"));        })(aLi[i].style)                                }};</script></head><body><div id="mainBox">    <ul>        <li>AAAAAAAAAAAA</li>        <li>BBBBBBBBBBBB</li>        <li>CCCCCCCCCCCC</li>        <li>DDDDDDDDDDDD </li>        <li>EEEEEEEEEEEE </li>        <li>FFFFFFFFFFFF </li>        <li>GGGGGGGGGGGG</li>        <li>HHHHHHHHHHHH </li>        <li>JJJJJJJJJJJJ</li>        <li>KKKKKKKKKKKK </li>            </ul></div></body></html>

我想效果是这样的：

AAAAAAAAAAAA

*BBBBBBBBBBBB *CCCCCCCCCCC

*DDDDDDDDDDDD *EEEEEEEEEEE

每个li做两排横排，应该怎么控制js？谢谢！

[解决办法]
一般用CSS控制：
<style>
body
{
margin: 0;
padding: 0;
color: #666;
font: 12px/1.5 arial;
}
ul, li
{
list-style: none;
padding: 0;
}
ul
{
width: 260px;
margin: 50 auto;
}
li
{
float: left;
line-height: 30px;
margin-left: 10px;
}
</style>

<script>
window.onload = function() {
var oBox = document.getElementById("mainBox");
aLi = oBox.getElementsByTagName("li");
i = 0;
for (var i=0; i < aLi.length; i++) {
(function(s) {
!!(i % 5) || (s.color = "red", s.fontSize = "16px", s.width = "260px", s.fontWeight = "700", !!i && (s.marginTop = "20px"));
})(aLi[i].style)
}
};
</script>

热点排行