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>?
-
Welcome to SO. If your question got answered then please accept an answer, otherwise it isn't clear whether you're already satisfied with one of the provided answers.Zeta– Zeta2012-02-16 02:19:32 +00:00Commented Feb 16, 2012 at 2:19
Add a comment
|
4 Answers
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>
2 Comments
user1174762
why don't you use ul and li in your styling?
Travis J
@user1174762 - For a couple of reasons. If
ul and li are used then it affects a broad range of those html objects, and I may want to use them elsewhere without this style. Also, I can assign class names to my html objects dynamically if I want. Furthermore, using ul and li is actually slower than using class names because css must search the dom for every ul, and then every li.Apply float:left; to <li> and style as needed.
1 Comment
user1174762
But if i apply it to <li> then the border line overflows out of the <ul> contaner
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.
answered Feb 16, 2012 at 1:04
Niet the Dark Absol
326k86 gold badges480 silver badges604 bronze badges
Comments
You can use display: inline-block to avoid having to mess with clearing floats:
