problem with width of <ul> when <ul> float left and <li> float right

[Chinsu]

<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 of 'li'. width of 'ul' = total width of 'li'.

because <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 !!!

[Aimee Bailey]

you can always cheat by using the

•

character code to denote your items inside an element with a display attribute of your choosing, you may find you get more control that way.

Aimee