Вложенные списки CSS в несколько столбцов

Я хотел бы отображать вложенные списки в столбцах, как это часто используется в нижних колонтитулах страниц.Вложенные списки CSS в несколько столбцов

<ul> 
    <li> 
     Header 1 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
     </ul> 
    </li> 
    <li> 
     Header 2 
     <ul> 
      <li>Item 1.2</li> 
      <li>Item 2.2</li> 
     </ul> 
    </li> 
</ul>

И я хотел бы, чтобы результат выглядит следующим образом:

Header 1   Header 2 
Item 1   Item 1.2 
Item 2   Item 2.2

Я играл с display:inline и display:block на некоторое время и не может получить его, чтобы показать правильно.

источник

2013-10-10 SaltyNuts

Может быть:

<ul> 
    <li style="float:left;"> 
     Header 1 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
     </ul> 
    </li> 
    <li style="float:left;"> 
     Header 2 
     <ul> 
      <li>Item 1.2</li> 
      <li>Item 2.2</li> 
     </ul> 
    </li> 
</ul>

источник

2013-10-10 18:42:31 Micah

поднят этот как наиболее краткий пример правильного элемента для использования. – SaltyNuts

Вы можете искать что-то вроде ниже коды, но есть несколько других способов тоже для достижения этой цели, так как это зависит от структуры вашей страницы и конечной цели

1) поскольку у вас есть вложенный список, и мы хотим настроить таргетинг на ширину и свойство float только до тех пор, пока первые дети не будут использовать «>» в .footer-list> li selector.

2) также вы можете определить ширину в пикселях или процентах для .footer-list> li. Его uptp вы.

3) вам может понадобиться очистить поплавок на родительском .footer-лист

<!DOCTYPE html> 
<html> 
<head> 
<title> New Document </title> 
<style type="text/css"> 

    *{ 
    padding:0; 
    margin:0 
    } 

    ul li{ 
    list-style:none; 
    } 
    .footer-list{ 
    padding:10px; 
    } 
    .footer-list > li{ 
    /*width:300px;*/ /* you may un comment this line and comment below line width in %*/ 

    width:20%; 
    float:left; 
    } 


</style> 
</head> 

<body> 
<ul class="footer-list"> 
    <li> 
     Header 1 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
     </ul> 
    </li> 
    <li> 
     Header 2 
     <ul> 
      <li>Item 1.2</li> 
      <li>Item 2.2</li> 
     </ul> 
    </li> 
</ul> 

</body> 
</html>

надеюсь, что это соответствует вашим потребностям.

источник

2013-10-10 18:45:29

Дайте первому уль теге класс «myul»

<ul class="myul"> 
    <li> 
     Header 1 ...

и использовать этот CSS код:

 ul.myul{ 
      list-style: none; 
     } 
     ul.myul>li{ 
      float:left; 
      padding-right: 30px; 
     } 
     ul.myul ul{ 
      list-style: none; 
      padding: 0; 
      margin: 0; 
     }

источник

2013-10-10 18:48:10 Silvanu

Вот решение, которое использует «ой, так здорово» дисплей: встроенный -блок; http://jsfiddle.net/b9MWz/4/

ul{ 
    padding: 0; 
    list-style: none; /*remove bullets*/ 
} 

ul li{  
    display: inline-block; 
    width: 20%; /*or whatever unit*/ 

} 

ul li ul, ul li ul li{ 
    display: static; 
    width: 100%; 

}

и решение, которое использует поплавок: http://jsfiddle.net/8F8Uy/3/

ul{ 
    padding: 0; 
    list-style: none; /*remove bullets*/ 
} 

ul li{  
    float: left; 
    width: 20%; /*or whatever unit*/ 

} 

ul li ul, ul li ul li{ 
    float: none; /* un-"float" */ 
    width: 100%; 

}

источник

2013-10-10 18:51:39 80PoundsOfFury

Вложенные списки CSS в несколько столбцов

ответ

Смежные вопросы