当前位置:首页 > 电脑网络 > 网站建设 > DIV+CSS实现列表一行两列的效果
网站建设
/ 电脑网络

DIV+CSS实现列表一行两列的效果

发布:2012-08-22 02:42:26 | 编辑: zhaozhishi.com |

摘要:


DIV+CSS没有系统地学习过,感觉还没入门,实际用起来捉襟见肘的,想用DIV+CSS控制,实现列表一行两列的效果,有人给出如下办法:

.left_b{width:376px;height:auto; float:left;}

.left_b li{width:170px;height:30px; line-height:15px; float:left; margin-right:10px;}

.left_b img{ padding:5px;}

<div class="left_b">
   <ul>
        <li><img src="小图片" 文字内容</li>
       <li><img src="小图片"  文字内容 </li>
  </ul>
(如果出现间距或是位置错误的问题,可以在LI里面加属性调整。)

参考效果如下:

DIV+CSS实现列表一行两列的效果

 以下办法你不妨也试一下,不过不是外部样式表,在不确定列项内容时也不好做吧。

<div>
<ul>
<li><div class="a1"></div><div class="a2"></div></li>
</ul>
</div>
 
a1---------float:left;定义宽度百分比
a2---------float:right;定义宽度百分比(注意:不要超过li的宽度)
li---------定义高度跟宽度

 

除非特别注明,所有文章由找知识百科和信息网 www.zhaozhishi.com 原创,可转载,必须注明去处,否则可能追究侵权责任。

本文关键字: DIV+CSS,一行两列
相关知识
无相关信息