Wie erzwingen Sie, dass alle li-Elemente in einer ul die gleiche Größe wie das größte Element haben, ohne eine feste Größe festzulegen?

Question

Ich habe eine Liste von Kategorien auf einer Seite, jede mit einer verschachtelten Liste von Unterkategorien. Der Kategorielisten-Objektstil ordnet die Objekte in einem Gittermuster an (über display:inline; float:left), wobei die Unterkategorien darunter in einem normalen Listen-Layout angezeigt werden. Die Kategorien und Unterkategorien sind benutzerkonfiguriert, obwohl ich nicht erwarte, dass es Hunderte gibt (wahrscheinlich nicht mehr als 10 oder 20 Unterkategorien für jede von 3 oder 4 Kategorien).

Ich würde lieber nicht eine feste Größe für jeden Listenpunkt festlegen. Ich möchte einen Rahmen um jedes Element zeichnen, aber ich mag es nicht, wie es aussieht, wenn jede Listenelementgröße auf ihrem Inhalt basiert. Gibt es einen Weg dazu, ohne eine feste Größe für die Listenelemente festzulegen?

Answer 1

Sie können nicht mit CSS, Sie müssten JavaScript verwenden.

Answer 2

Die einzige Möglichkeit, mehrere Zellen in einer Spalte zu haben, um die gleiche Breite zu haben, betrifft Tabellen. IE Ausdrücke könnten auch funktionieren, aber ich würde es nicht empfehlen.

Answer 3

Eigentlich ist es möglich.

<div style="float: left"> 
    <div style="display: block"> 
    <div class="cat">Category #1</div> 
    <div class="sub">Sub category #1</div> 
    <div class="sub">Sub category #2</div> 
    </div> 
    <div style="display: block"> 
    <div class="cat">Category #2</div> 
    <div class="sub">Sub category #1</div> 
    <div class="sub">Sub category #2 LONG LONG LONG</div> 
    </div> 
</div> 

Nur wegen der Art und Weise, wie Blockelemente bis zur maximalen Größe füllen. Ich weiß, es ist Standard, nur hinzugefügt, um es sichtbar zu machen. Das "float: left" ist nicht erforderlich, aber "display: inline" wäre.

Answer 4

Anzeige: Inline und Float: links sind keine gute Kombination. In der Tat ist die Einstellung der Anzeige auf einem Floating-Element redundant, da sie automatisch zur Blockebene werden, sobald sie floated ist. (abgesehen von einem seltsamen ie6 Bug mit doppelten Rändern, gibt es keinen Grund, die Anzeige zu setzen: auf einem Floated-Element)

Answer 5

float: left zu haben scheint zu helfen.

Beispiel: http://jsbin.com/uluke

Answer 6

Wenn Sie Ihr Markup ändern können, als:

ul { 
    float: left; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

li { 
    border: 1px solid black; 
    margin-left: 1em; 
} 

li.category { 
    border: none; 
    margin-left: 0; 
} 


<ul> 
    <li class='category'>Category #1</li> 
    <li>Sub #A</li> 
    <li>Sub #B</li> 

    <li class='category'>Category #2</li> 
    <li>Longer Sub #C</li> 
    <li>Sub #D</li> 
</ul> 

Answer 7

Wenn Sie die Textgröße Ihres Durchschnitt Kategorie Artikel wissen Sie min-width nutzen könnten alle Elemente diese Einstellung vornehmen, Größe, aber erlauben Sie ihnen, für super große Einzelteile zu wachsen. Dies könnte sogar programmgesteuert beim Rendern eingestellt werden.

Bitte entschuldigen Sie das große Beispiel.
CSS

ul.tags { 
    display:block; 
    margin: 0; 
    padding:0; 
    width:40em; 
} 
ul.tags li { 
    display:inline-block; 
    /* 
    * or for FF2 compat use    
    display:inline-block; 
    float:left; 
    */ 
    margin:2px; 
    padding:2px; 
    min-width:8em; 
    border:1px solid #ddd; 
    text-align:center; 
} 

HTML

<ul class="tags"> 
     <li>lorem ipsum dolor </li> 
     <li>dolor sit amet</li> 
     <li>consectetur adipisicing elit</li> 
     <li>sed do </li> 
     <li>eiusmod tempor incididunt </li> 
     <li>ut labore </li> 
     <li>et dolore </li> 
     <li>magna </li> 
     <li>aliqua</li> 
     <li>ut enim </li> 
     <li>ad minim veniam</li> 
     <li>quis nostrud </li> 
     <li>exercitation ullamco laboris </li> 
     <li>nisi ut </li> 
     <li>aliquip </li> 
     <li>ex ea </li> 
     <li>commodo </li> 
     <li>consequat</li> 
     <li>duis aute irure </li> 
     <li>dolor in </li> 
     <li>reprehenderit </li> 
     <li>in voluptate </li> 
     <li>velit esse </li> 
     <li>cillum dolore </li> 
     <li>eu fugiat nulla </li> 
     <li>pariatur excepteur </li> 
     <li>sint </li> 
     <li>occaecat cupidatat </li> 
     <li>non proident</li> 
     <li>sunt in </li> 
     <li>culpa qui </li> 
     <li>officia deserunt </li> 
     <li>mollit anim id est laborum</li> 
</ul>