...

View Full Version : How do I make each <li> appear on the same line?



jihanemo
11-03-2008, 11:12 PM
How do I create an unordered list in which each <li> appears on the same line instead of separate lines? Is there CSS code I can use? Attribute?

twodayslate
11-03-2008, 11:59 PM
float: right/left;

jihanemo
11-04-2008, 12:08 AM
Thanks!

treigh
11-04-2008, 07:07 AM
How do I create an unordered list in which each <li> appears on the same line instead of separate lines? Is there CSS code I can use? Attribute?

You should use the inline display property

Here's a basic example of how to use it. good luck


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#inline {
width: 100px;
height: 100px;
}
#inline ul {
width: 100%;
marin:0;
padding:0;
}
#inline ul li {
display: inline;
list-style: none;
float: left;
width: auto;
height: 30px;
marin:0;
padding:10px;

}
</style>

</head>
<body>
<div id="inline">
<ul>
<li>inline text</li>
</ul>
</div>
</body>
</html>

VIPStephan
11-04-2008, 04:44 PM
height and width have no effect on inline elements.
display: inline used in conjunction with vertical padding could lead to problems, though, since interpretation of how to display it is different in different browsers. The only thing that might work would be line-height but it depends on the context.
list-style: none isn’t necessary on elements with display: inline since the list marker appears only on elements with display: list-item.
A combined use of float and display type of “inline” isn’t of any use since float overrules the inline display (or display: inline is ignored, for that matter). The only use display: inline has while floating an element is to overcome the IE double margin bug (http://positioniseverything.net/explorer/doubled-margin.html).


One can use the inline display if it’s simple text and/or if the list items are supposed to be centered which can then easliy be done with text-align then. If you have more advanced settings such as a navigation with graphical buttons that would be best done with floated list items.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum