IE7 and IE8: Float clearing without adding empty elements

前端未结

关注

 4  596

隐瞒了意图╮

I\'m having a problem similar to the one described here (without a resolution):

IE7 float and clear on the same element

The following HTML renders as intende

相关标签:

4条回答

-上瘾入骨i

2021-01-14 19:02

Try this, demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>list floats</title>
  <style type="text/css">
  li{clear: none;list-style: none}
  .clearer{float: left; clear: left}
  .floater{ float:left}
  </style>
</head>
<body>
<ul>
    <li class="">1</li>
    <li class="clearer">2</li>
    <li class="">3</li>
    <li class="clearer">4</li>
    <li class="floater">5</li>
    <li class="">6</li>
    <li class="clearer">7</li>
</ul>
</body>
</html>

0 讨论(0)

自闭症患者

2021-01-14 19:03

try following code. much simpler but a little hard to understand!

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li{list-style: none}
.float{ float:left}
</style>
</head>
<body>
<ul>
<li class="">1</li>
<li class="float">2</li>
<li class="">3</li>
<li class="float">4</li>
<li class="float">5</li>
<li class="">6</li>
<li class="float">7</li>
</ul>
</body>
</html>

0 讨论(0)

情话喂你

2021-01-14 19:15

You can simply use a <br class="clear" /> with a br.clear{ clear: both; }

0 讨论(0)
发布评论:

提交评论
- 加载中...
一向

2021-01-14 19:26
I sort of agree with the table option. But, you can do it with an empty list item. This would let you get rid of the 'clear' attribute in the 'right' and 'middle' classes. You would also need a 'solo' class for the single item to be sure it clears both ways.
```
.clear {
    clear: both; 
    margin:0px;
    padding:0px ;
    font-size:1px;
}
.solo {
    clear: both; 
}

<li class="solo">1</li> 

<li class="left">2</li> 
<li class="right">3</li> 
<li class="clear"></li> 
```
0 讨论(0)
发布评论:

提交评论
- 加载中...