Member Avatar for adaykin

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
  • 122 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by adaykin
Member Avatar for buddylee17

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;
}
Member Avatar for Eilandor

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>
Member Avatar for adaykin

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.