css - 如何使用 css 为 float 元素创建的行设置边框属性？

Question

我有一个内部容器 div。现在这个画廊 div(设置宽度 = 800 像素)包含许多大小为 100x100 的缩略图。缩略图是从数据库中取出的，缩略图的数量可能会根据所使用的查询而有所不同。此外，每个缩略图都在图库 div 中设置为“float:left”。

现在的问题是，假设每行放置了 8 个缩略图，并假设查询创建了 3 个这样的行，我可以为这些行设计边框底部吗？

基本上问题是，我可以为由设置宽度内的 float 元素创建的行指定边框属性吗？

谢谢!

Answer 1

我的贡献:

<ul>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li>    <li>        <img src="" alt=""/>    </li></ul>

ul { width:500px; }img {    width:50px;    height:50px;}li {    float:left;    border-bottom: 1px solid grey;    padding: 5px 5px 0;}

直播:http://jsfiddle.net/Bduxm/5/