如果Li的样式为“float：left;”，如何为UL创建边框？

Question

My css for ul is:

ul {list-style-type: none; margin:auto; border-top: 1px solid #0093a7; border-bottom: 1px solid #0093a7; margin: 20px 0;}
ul li {float:left; padding:5px;}

The UL tag:

<ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
</ul>

Now both borders are on the top of the UL. How to make bottom border then?

Answer 1

You need to apply overflow:hidden to your ul so that your floats are cleared and are contained within the ul .

Currently your ul is collapsing since it contains only floated elements.

If you need to support IE6(?!) then you will need to make sure your container (ie. ul ) hasLayout for the overflow trick to work. You can do this by applying a width.