0

Hello, I have the following code:

<dt>
	<p style="text-align:left;">
		<a href="">SHOW HORSES</a>
	</p>
	<ul>				
		<li><a href="">Riding The Best</a></li>
		<li><a href="">Western</a></li>
	        <li><a href="">English</a></li>
		<li><a href="">Reference Trainers</a></li>
	</ul>
</dt>

with the stylesheet:

ul, li {
 display: inline;
 margin: 0;
 padding: 0;
}
p {
 display: inline;
}

/* Background of where the links are placed */
#list dt { 
	padding:7px;
	padding-right: 2%;
	text-align: right;
}

How would I set up the p to be all the way on the left, and the list items to be all the way on the right? Is there any way I can do this without using margins and pixels?

3
Contributors
3
Replies
4
Views
9 Years
Discussion Span
Last Post by adaykin
0

Absolute position the elements. If you want them to be positioned on the far right and left sides of another element you may also need a container div with a relative position.

p {
display: inline;
position: absolute;
left:0px;
}

ul, li {
position:absolute;
 right:0px;
 display: inline;
 margin: 0;
 padding: 0;
}
0

Try this, modify something:

<html>
<head>
<style>
ul {
 display: block;
 float:right;
 margin: 0;
 padding: 0;
 text-align:right;
}
 li {
 display: inline;
 margin: 0;
 padding: 0;
}
p {
 display: block;
 float:left;
}

/* Background of where the links are placed */
#list dt { 
	padding:7px;
	padding-right: 2%;
	text-align: right;
	border:1 solid red;
}
</style>
</head>
<body>
<div style="width:400px">
	<dt>
		<p style="width:150px;text-align:left;">
			<a href="">SHOW HORSES</a>
		</p>
		<ul style="width:200px">				
			<li><a href="">Riding The Best</a></li>
			<li><a href="">Western</a></li>
		        <li><a href="">English</a></li>
			<li><a href="">Reference Trainers</a></li>
		</ul>
	</dt>
</div>
</body>
</html>
0

when I do that the links in the li all line up directly on top of each other

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.