Jump to content

CSS vertical unordered list within horizontal unordered list...


RIRedinPA

Recommended Posts

is this possible...

 

1 1 1

2 2 2

3 3 3

 

I can't get this to layout correctly...everything is stacked vertically as opposed to horizontally...

 


<html>
<head>
	<title>TITLE GOES HERE</title>

	<!--CSS Link-->
</head>
<body>


<ul style="width: 500px; border: 1px solid red;">
   <li style="display: inline; list-style-type:none;">
      <h2>Title 1</h2>
         <ul>
           <li>1</li>
           <li>2</li>
           <li>2</li>
        </ul>
   </li>

<li style="display: inline; list-style-type:none;">
      <h2>Title 2</h2>
         <ul>
           <li>1</li>
           <li>2</li>
           <li>2</li>
        </ul>
   </li>

<li style="display: inline; list-style-type:none;">
      <h2>Title 3</h2>
         <ul>
           <li>1</li>
           <li>2</li>
           <li>2</li>
        </ul>
   </li>
</ul>
</body>
</html>

Are you sure this isn't tabular data? It looks tabular, in which case you should use a table. But if it isn't tabular, then you can do this:

 

<ul id="outer">
  <li>
    <ul class="inner">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>
    <ul class="inner">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>
    <ul class="inner">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
</ul>

 

CSS:

ul#outer li
{
  float:left;
}
ul.inner li
{
  float:none;
}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.