如何在列中设置多个列表的样式？

2列我工作的解决方案，现在是：

<div class="catalog_menu_widget"> 
<ul> 
    <li>LOREM IPSUM</li> 
    <li>LOREM IPSUM</li> 
    <li>LOREM IPSUM</li> 
    <li>LOREM IPSUM</li> 
</ul> 
<ul> 
    <li>LOREM IPSUM</li> 
    <li>LOREM IPSUM</li> 
    <li>LOREM IPSUM</li> 
</ul> 
</div> 

.catalog_menu_widget { 
    width: 820px; 
    padding: 10px; 
    background: #e4e8fe; 
    float: left; 
} 

.catalog_menu_widget ul { 
    width: 410px; 
    float: left; 
} 

.catalog_menu_widget li { 
    line-height: 25px; 
} 

.catalog_menu_widget a { 
    font-size: 14px; 
    color: #003769; 
    text-transform: uppercase; 
    /*font-weight: bold;*/ 
}

现在的问题是，它的CSS样式，我需要实现灵活的多栏布局？ 3个列显示3个UL，4个列显示4个UL，... 我已经使用了它，但大多数解决方案都是CSS3或仅用于2列，我们只是想支持IE8（它没有CSS3），此外重要的是标记（多个UL）是一个先决条件，不能被触及。

在此先感谢您的帮助！

编辑：

解决方案：

var width = 100/jQuery('.catalog_menu_widget ul').length; 
jQuery('.catalog_menu_widget ul').css({width: width + '%'});

来源

2013-11-26 infabo

当你标记jquery，试试这个：

$(document).ready(function(){ 
    var $width = 100/$('.catalog_menu_widget ul').length; 
    $('.catalog_menu_widget ul').css({width: $width + '%'}); 
})

FIDDLE

来源

2013-11-26 14:46:05 Morpheus

谢谢！为我工作。我把你的代码放到我的“解决方案”下的开始文章中。 – infabo

欢迎您:) – Morpheus

如何像this fiddle。设置min-width属性还允许布局响应。

如果你想手动输入宽度％的值，jQuery是多余的。

CSS

h2 { 
    font-weight:bold; 
} 
.cols li{ 
    float:left; 
    min-width:100px; 
}

HTML

<ul class='cols'> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul>

jQuery的

var cols=3; 
$('.cols li').css({width:+100/cols+'%'});

来源

2013-11-26 14:53:59 SW4

如何在列中设置多个列表的样式？

回答

相关问题