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
  • 109 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by adaykin

Recommended Answers

All 3 Replies

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.