Wie in zwei Spalten in einer Zeile ul Liste angezeigt werden?

Ich habe die Liste wie folgt:Wie in zwei Spalten in einer Zeile ul Liste angezeigt werden?

<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

ich will Anzeige in diesem Format: (Parent li in einer rohen, zwei Spalten, dann Kind li in einer Spalte mit mehreren raws)

List1 List2
ChildList1 ChildList1
ChildList2

Quelle

2009-07-27 CodeYun

Sie möchten immer noch einem "strikten" Doctype statt einem Übergang folgen. Wenn Sie strict hinzufügen, verhält sich IE korrekt. –

Ich sehe, aber ich arbeite an einem 10 Jahre alten Seite. Ich habe keine Eingeweide, um das streng zu machen. Ich kann nur versuchen, es so zu machen, wie es ist :) – CodeYun

Wie wäre es damit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<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.

Quelle

2009-07-27 18:46:32

funktioniert es !!! danke dude – CodeYun

Tutorial hier: 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!

Quelle

2009-07-27 18:38:00 Petrogad

danke für info, aber es funktioniert nicht – CodeYun

Vielleicht haben Sie gerade diese Listen schwimmen nebeneinander?

<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>

Und dann würden Sie Ihre CSS haben, die wie folgt lautet (wenn Sie diese Listen in einen Raum 800px breit, zum Beispiel zu passen versuchten):

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

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

Quelle

2009-07-27 18:40:43 Popmatic

Ich hoffe, die finden was Sie suchen:

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

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

Quelle

2009-07-27 18:43:05

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<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>

Quelle

2009-07-27 18:43:21

Sie schlagen mich dazu. –

dieser Code sieht sehr ordentlich aus, aber es funktioniert nicht in IE7 :( – CodeYun

Dort habe ich es behoben. Jetzt wird es –

Sie können es mit CSS tun (noch experimentell). In dieser Mozilla's page zeigen sie, wie es geht.

Um kurz zu sein, sollte dies in Ihrem CSS sein:

ul 
{ 
columns: 2 12em; /* two columns, each 12em width */ 
column-gap: 1em; /* spacing between columns */ 
column-rule: 1px dashed silver; /* border between columns */ 
-moz-columns: 2 12em; /* for Gecko */ 
-moz-column-gap: 1em; 
-moz-column-rule: 1px dashed silver; 
-webkit-columns: 2 12em; /* for WebKit */ 
-webkit-column-gap: 1em; 
-webkit-column-rule: 1px dashed silver; 
}

Dieses post in einem anderen Forum nützlich sein können. Auch diese site zeigt, wie es in IE und Opera zu tun.

Quelle

2012-09-28 20:46:37

Wie in zwei Spalten in einer Zeile ul Liste angezeigt werden?

Antwort

Verwandte Themen