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>