CODEWITHSUNDEEP
htmlcss
RSM
RSM

Reputation: 15108

<ul><li> wont go horizontal

I have a ul i want to go horizontal but its not working. Heres the code:

html:

<ul id="ul_text">
<li>
<h2>Text</h2>
<p>....</p>
</li>
<li>
<h2>text</h2>
<p>....</p>
</li>
</ul>

CSs:

#ul_text {
list-style-type: none; display:inline; }

#ul_text li{
border-right: 1px solid #ffffff; width:260px; }

However this does not work work! what am i doing wrong?

Upvotes: 2

Views: 19117

Answers (4)

biscuitstack
biscuitstack

Reputation: 12112

You can try floating the li elements:

#ul_text li {
  border-right: 1px solid #ffffff; 
  width:260px; 
  float: left;
}

or adding: list-style-type: none; as well as switching display: inline to the li element, as suggested already.

#ul_text li {
  border-right: 1px solid #ffffff; 
  width:260px; 
  display: inline; 
  list-style-type: none;
}

Upvotes: 10

Gary Corbett
Gary Corbett

Reputation: 139

add

float:left;

to

#ul_text {list-style-type:none; }

Upvotes: 0

Dominic
Dominic

Reputation: 3304

You need to put display: inline on your li instead of the ul, like so:

#ul_text {
  list-style-type: none;
}

#ul_text li {
  border-right: 1px solid #ffffff; 
  width:260px; 
  display:inline;
}

Upvotes: 10

Josh
Josh

Reputation: 12566

Here is a quick sample: http://css.maxdesign.com.au/listamatic/horizontal01.htm

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Upvotes: 3

Related Questions