horizontal ul with some li on left and others right

**gulliver** · Sep 28, 2004, 06:03

Another day... another question...

I have a horizontal ul with 5 li.
I want to 'split it'... 3 li to be on the left and 2 on the right. With a gap between.

To float a single li to the right, I'd use...

ul#listname .right {float: right;} and apply a class="right" to the appropriate li.

But what about 2? Can I simply wrap a class around 2 li?

**pacman2504** · Sep 28, 2004, 07:26

This seems to work OK, but I've just noticed that IE is losing the list style, for some reason:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Untitled
    </title>
    <style type="text/css">
/*<![CDATA[*/
<!--
#listContainer {
  width: 400px;
  border: 1px solid #ccc;
}
li.right {
  float:right;
  margin-right: 20px;
  clear: both;
}
-->
/*]]>*/
    </style>
  </head>
  <body>
    <div id="listContainer">
      <ul>
        <li class="right">
          List Item 4
        </li>
        <li class="right">
          List Item 5
        </li>
        <li>
          List Item 1
        </li>
        <li>
          List Item 2
        </li>
        <li>
          List Item 3
        </li>
      </ul>
    </div>
  </body>
</html>

**gulliver** · Sep 28, 2004, 07:53

On IE Mac I'm getting 4 and 5 on the right with no bullets. Th eothers are to the left with bullets.

Should all be inline, no bullets.

Thanks anyway, I'll take a break and come back to it.

**pacman2504** · Sep 28, 2004, 08:19

Sorry, didn't read it properly

Is this what you are looking for:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Untitled
    </title>
    <style type="text/css">
/*<![CDATA[*/
<!--
#listcontainer {
  width: 100%;
  height: 50px;
  border: 1px solid #ccc;
  padding: 0;
}
 #list li
{
display: inline;
list-style-type: none;
padding: 10px;
}
#list li.right {
  float: right;
}
#list li.left {
  float: left;
}
-->
/*]]>*/
    </style>
  </head>
  <body>
    <div id="listcontainer">
      <ul id="list">
        <li class="left">
          <a href="#">Item one</a>
        </li>
        <li class="left">
          <a href="#">Item two</a>
        </li>
        <li class="left">
          <a href="#">Item three</a>
        </li>
        <li class="right">
          <a href="#">Item five</a>
        </li>
        <li class="right">
          <a href="#">Item four</a>
        </li>
      </ul>
    </div>
  </body>
</html>

**gulliver** · Sep 28, 2004, 10:22

Thanks. That's great.

Is it reliable to 'clean the code' so the default li is a float left?
I know it's a bit anal - I like 'simple'.

#list li
{
display: inline;
list-style-type: none;
padding: 10px;
}

#list li {
float: left;
}

#list li.right {
float: right;
}

<ul id="list">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li class="right"><a href="#">Item five</a></li>
<li class="right"><a href="#">Item four</a></li>
</ul>

**pacman2504** · Sep 29, 2004, 01:13

Yes, the less code the better. You could actually use less code still:

Code:

#list li { display: inline; list-style-type: none; padding: 10px; float:left;} 
#list li.right {float: right;}

**gulliver** · Oct 1, 2004, 08:26

Thanks. Appreciated.

The SitePoint Forums have moved.

User Tag List

Thread: horizontal ul with some li on left and others right

Thread Tools

Display

Hybrid View

horizontal ul with some li on left and others right

Bookmarks

Bookmarks

Posting Permissions