html - titel - title-tag




Wie stelle ich<li> mit Blockelementen nebeneinander her? (6)

Nur eine Alternative zur Verwendung von Inline-Elementen, da IE eine Geschichte von Auffüllungsproblemen mit Inline hatte:

.layout-children:after
{
  content: "";
  display: block;
  height: 0px;
  clear: both;
}

.layout-children .field
{
  float: left;
}

Ich habe ein Mockup-Layout für etwas hier . Im Wesentlichen gibt es Abschnitte, Spalten und Felder, die alle als eine Kombination aus <ul> und <li> Elementen geschrieben sind. Dies wird speziell für das spätere Parsen durchgeführt.

Ein Ausschnitt des HTML:

<li class="layout"><span class="type">[Column] </span>
    <ul class="layout-children">
        <li class="field"><span class="type">[Text] </span>A field</li>
        <li class="field"><span class="type">[Text] </span>Another field</li>
        <li class="field"><span class="type">[Text] </span>Yet another field</li>
    </ul>
</li>
<li class="layout"><span class="type">[Column] </span>
    <ul class="layout-children">
        <li class="field"><span class="type">[Text] </span>More fields</li>
        <li class="field"><span class="type">[Text] </span>And one more field</li>
    </ul>
</li>

Wenn Sie zu dem verknüpften Inhalt gehen, werden Sie bemerken, dass diese Spalten vertikal sitzen. Ich möchte, dass die Säulen nebeneinander sitzen, aber ich bin mir nicht sicher, wie ich das anstellen soll.

Es wäre vorzuziehen, wenn sich der HTML-Code nicht ändern würde, nur der CSS.


Verwenden Sie in Ihrem <UL> -Tag das css-Attribut "list-style: none;" und im <li> -Tag das css-Attribut "display: inline;" Du musst mit der Polsterung und dem Rand herumspielen, damit es gut aussieht, aber diese beiden Attribute werden dich auf den Weg bringen. Für ein besseres Beispiel siehe meine Non-Profit-Website: Technisch lernen


yeah mit display:block es wäre unmöglich, sie nebeneinander sitzen zu lassen, es sei denn, Sie würden versuchen, eine Breite für jeden von ihnen angeben, aber wenn das der Fall ist, verwenden Sie einfach display:inline


inline oder inline-block zu verwenden, wird nichts als Ärger sein. Es ist eine viel bessere Idee, Floats zu verwenden, wie @Dmitry Z vorgeschlagen hat (aber ohne den Margin-Hack, der nicht notwendig ist).


display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;

Ich habe das gerade zu deinem CSS hinzugefügt:

ul .section-children li.layout {
    display : inline-block;
}

Leider weiß ich nicht, wie gut Inline-Block heutzutage unterstützt wird.





css