Thứ Năm, 5 tháng 8, 2010

problem with width of 'ul' when 'ul' float left and 'li' float right


<html>
<head>
<style>
#ex {
width: 700px;
background: red;
float: left;
}
a, span {
display: block;
}
ul, li {
margin: 0;
padding: 0;
}
.ex_1 {
float: left;
background: yellow;
list-style: none;
}
.ex_2 {
float: right;
}
</style>
</head>

<body>
<div id="ex">
<ul class="ex_1">
<li class="ex_2"><a href="#"><span>example 1</span></a></li>
<li class="ex_2"><a href="#"><span>example 2 - </span></a></li>
<li class="ex_2"><a href="#"><span>example 3 - </span></a></li>
<li class="ex_2"><a href="#"><span>example 4 - </span></a></li>
</ul>
</div>
</body>
</html>

IN IE7 when 'ul' float: left and 'li' float:left, the width of 'ul' is ok. but when 'ul' float:left and 'li' float: right, the width of 'ul' is 100%(the background yellow). What should i do to make the width of ul when 'li' float:right is look like 'li' float:left. i can't set width of ul because it's must depends on 'li'. width of 'ul' = total width of 'li'.

because both <a>  and <span>  are default display:block, so i can't set display:inline for <li>.

NOTE : only use CSS, not JAVASCRIPT.

Please help me !!!