CODEWITHSUNDEEP
htmlcss
user1174762
user1174762

Reputation: 593

Styling Lists with CSS

I am working on an un-ordered list. I have searched all over the internet for a good tutorial but I cannot find one. I want to display it inline and have a border line in between each <li> item. Now I am just unsure of the standards for styling lists. Do I use padding/margins to position the <li> items? If so do I apply it to the <ul> container or <li> or <a>?

Upvotes: 0

Views: 115

Answers (4)

Travis J
Travis J

Reputation: 82267

Try using margins, borders, and float.

<html>
<head>
<style type="text/css">
.liClass
{
  float:left;
  padding-right:10px;
  padding-left:10px;
  border-right:thick double #ff0000;
}
.lastLi
{
  float:left;
  padding-left:10px;
}
</style>
</head>
<body>
<ul>
<li class="liClass">one</li>
<li class="liClass">two</li>
<li class="lastLi">three</li>
</ul>
</body>
</html>

Upvotes: 1

Timmy O&#39;Mahony
Timmy O&#39;Mahony

Reputation: 53971

You can use display: inline-block to avoid having to mess with clearing floats:

http://jsfiddle.net/ZehJN/

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

Use display: inline-block to make the list items appear side-by-side (it is more reliable than float: left), then add borders or whatever else you want - maybe a width and some margin.

Upvotes: 0

Mārtiņš Briedis
Mārtiņš Briedis

Reputation: 17752

Apply float:left; to <li> and style as needed.

Upvotes: 0

Related Questions