ansaurus

Question

How to display ul list in two columns in one row?

Answer 1

A:

Tutorial Here: http://css.maxdesign.com.au/listutorial/horizontal_master.htm

.yourElement ul li { display: inline; }

.yourElement ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

Good Luck!

Frederico 2009-07-27 18:38:00

thanks for info, but it doesn't work

CodeYun 2009-07-27 18:40:28

Answer 2

A:

Perhaps you would just float these lists next to one another?

<div id="left-float">
  <ul>
    <li>List1</li>
    <li><ul>
          <li>ChildList1</li>
          <li>ChildList2</li>
        <ul></li>
    </ul>
</div>

<div id="right-float">
  <ul>
    <li>List2</li>
    <li><ul>
          <li>ChildList1</li>
        <ul></li>
    </ul>
</div>

And then you would have your css that reads like this (if you were trying to fit these lists into a space 800px wide, for instance):

#left-float
{
  float:left;
  width:400px;
}

#right-float
{
  float:right;
  width:400px;
}

Popmatic 2009-07-27 18:40:43

Answer 3

A:

I hope the following is what you are looking for:

.ListStyle ul li {
    float: left;
    margin-left: 20px;
}

.ListStyle ul li ul li {
    margin: 0px 20px;
}

Alan Haggai Alavi 2009-07-27 18:43:05

Answer 4

A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
<style type="text/css">
div.ListStyle>ul {
    list-style-type: none;
}
div.ListStyle>ul>li {
    display:inline;
}

div.ListStyle>ul>li>div {
    float: left;
}
div.clear {
    clear: both;
}
</style>
<body>
<div class="ListStyle">
   <ul>
      <li>
     <div>
     List1
     <ul> 
            <li>ChildList1</li>
            <li>ChildList2</li>
         </ul> 
      </div>
      </li>
      <li><div>
     List2
           <ul> 
            <li>ChildList1</li>
           </ul> 
        </div>
      </li>
   </ul>
</div>
<div class="clear"></div>

</body>

ferrari fan 2009-07-27 18:43:21

You beat me to it.

Mr. Shiny and New 2009-07-27 18:44:23

this code looks very neat, but it doesn't work in IE7 :(

CodeYun 2009-07-27 18:49:26

There I fixed it. Now it will

ferrari fan 2009-07-27 18:52:05

Answer 5

A:

How about this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
* { margin: 0; padding: 0; }

.ListStyle ul li {
 float: left;
 list-style-type: none;
}

.ListStyle ul li ul li {
 float: none;
 margin-left: 20px;
}
</style>
</head>
<body>
<div class="ListStyle">
   <ul>
      <li>List1
         <ul> 
            <li>ChildList1</li>
            <li>ChildList2</li>
         </ul>
      </li>
      <li>List2
           <ul> 
            <li>ChildList1</li>
           </ul>
      </li>
   </ul>
</div>
</body>
</html>

Live Example.

Paolo Bergantino 2009-07-27 18:46:32

it works!!! thanks dude

CodeYun 2009-07-27 18:51:25

ansaurus

tags:

views:

answers:

How to display ul list in two columns in one row?

related questions