读书人

求高手帮小弟我写个列表与列表之间的嵌

发布时间: 2012-08-01 17:53:40 作者: rapoo

求高手帮我写个列表与列表之间的嵌套问题


最好是列表与列表的嵌套的,因为要后台传入数据。。

<div style="height:230px;width:100%; text-align:center; float:left; margin-top:0px;">
<ul class="goods_pic">
<Li class="f2">
<ul id="foot_kind">
<li>品牌女装</li>
<li style="width:110px;text-align:center;"><a style=" width:50px;overflow:hidden;"><img src="dd.png" /></a></li>
<li id="foot_kind_01">
<ul>
<li>太虚</li>
<li>|</li>
<li>太虚</li>
<li>太虚</li>
<li>|</li>
<li>太虚</li>
</ul>
</li>
</ul>
</Li>
<Li class="f2"><a><img src="aa.jpg" /></Li>
<Li class="f2"><a><img src="aa.jpg" /></a></Li>
<Li class="f2"><a><img src="aa.jpg" /></a></Li>
<Li class="f2"><a><img src="aa.jpg" /></a></Li>
<Li style="margin-right:0px;" class="f2"><a><img src="aa.jpg" /></a></Li>
</ul>
</div>

[解决办法]

HTML code
<style>#category{ font-size:12px;}#category label{ font-weight:bold; height:30px; line-height:30px;}#category ul{ list-style-type:none;}#category > ul,#category li ul{ margin:0; padding:0px;  width:auto; overflow:hidden;}#category > ul > li{ float:left; width:21%; border:solid 1px #ccc; padding:1%; margin:1%;}li li{ float:left; margin:5px 3px; padding:0 5px;border-left:solid 1px #ccc;}li li:first-child{ border-left:none;}</style><div id="category">    <ul>        <li>             <label>品牌女装</label>             <img src="my image path" />            <ul>                <li>连衣裙</li>                <li>T</li>                <li>衬衫</li>                <li>婚纱</li>                <li>连衣裙</li>                <li>T</li>                <li>衬衫</li>                <li>婚纱</li>                <li>连衣裙</li>                <li>T</li>                <li>衬衫</li>                <li>婚纱</li>            </ul>        </li>        <li>             <label>时尚男装</label>             <img src="my image path" />            <ul>                <li>连衣裙</li>                <li>T</li>                <li>衬衫</li>                <li>婚纱</li>                <li>连衣裙</li>                <li>T</li>                <li>衬衫</li>                <li>婚纱</li>                <li>连衣裙</li>                <li>T</li>                <li>衬衫</li>                <li>婚纱</li>            </ul>        </li>    </ul></div> 

读书人网 >CSS

热点推荐