Having trouble converting list to inline

I’m trying to find a way to display these radio buttons inline rather than vertically aligned. I have tried setting display to “inline” but something else is prohibiting it from doing so. I’m using this tutorial as a starting point:
http://www.weblee.co.uk/2009/05/30/radio-button-replacement-with-style/

I only want 2 options so I removed options 3 and 4 from the demo listed in the link. Can some help me with the CSS to have the two options listed side by side. The checkbox can go on either side of the options, I’m not that concerned with it. Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/radio-demo.js"></script>
<title>Fancy Checkbox</title>
</head>

<body>

<h2>Check an Option</h2>

<div id="options">
    <ul id="list">
        <li class="active"><a href="#" class="option1 active" id="link1"><span>Option</span></a></li>
        <li><a href="#" class="option2" id="link2"><span>Option</span></a></li>
    </ul>
</div>
<p><a href="#" class="toggleform">Show Hidden Form Radion Buttons</a></p>
<form action="step2.html" method="post" id="radioform">
	Option 1: <input name="option1" type="radio" value="option1" id="option1" checked="checked" /><br />
	Option 2: <input name="option1" type="radio" value="option2" id="option2" /><br />  
</form>
</body>
</html>
body{ margin:50px; }

#options{ margin:30px 50px 50px 0px; padding:0; }
#options ul{ margin:0; padding:0; }

#options li{
	margin:0 0 5px 0;
	padding:0;
	list-style:none;
	padding:0 0 0 42px;
}

#options li.active{
	background:url('../images/tick.png') no-repeat;
}

#options li a span{
	display:none;
}

a.option1{ background:url('../images/option1.png') no-repeat;}
a.option2{ background:url('../images/option2.png') no-repeat;}
a.option3{ background:url('../images/option3.png') no-repeat;}
a.option4{ background:url('../images/option4.png') no-repeat;}

a.option1,  a.option2, a.option3, a.option4{
	background-position:top;
	display:block;
	width:230px;
	height:40px;
}

a.option1:hover, a.option2:hover, a.option3:hover, a.option4:hover{
	background-position:bottom;
}

#options li a.active{
	background-position:bottom !important;
}

#radioform{display:none}

Well the <li>'s are block level elements and they are the main parent of each “option” so you need to float:left; on the <li>'s to get them side by side.

As a result of doing that, you’ll need to give overflow:hidden to the <ul> parent.