html titel Wie stelle ich<li> mit Blockelementen nebeneinander her?




title-tag (7)

Wie wäre es damit:

.layout { float: left; width: 50%; margin: 0; border: 0; padding: 0; /* background: transparent */ }
* html .layout { display: inline } /* IE margin hack */
.field { clear: both }

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.


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.


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


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


Ein einfacher Schwimmer: links funktioniert (mit einer kleinen Anpassung für die Breite)

li {
    margin: .5em 1em;
    padding: .1em;

    font-family: sans-serif;
    list-style-type: none;
    border: 1px #666 solid;
    float: left;
}
#layout-section {
    width: 85%;
}

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

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







css