web-dev-qa-db-ger.com

Hänge horizontale Regel an jeden <li> an

Für meine <ul>-Liste möchte ich nach jedem Element einer Liste einen <hr> hinzufügen. Das Ergebnis sollte wie folgt aussehen:

<ul class="mylist">
    <li>
        moooo!
        <hr width="40%">
    </li>
    <li>
        maaaaa!
        <hr width="40%">
    </li>
    ...
</ul>

Es ist ein schlechter Stil, der <hr> zu jedem <li> hinzugefügt wird. Ich kann nicht benutzen:

.mylist > li: after{
    content: "<hr>"
}

als Inhalt würde die Charaktere entkommen.

Ich mache auch nicht möchte jQuery verwenden:

$('.mylist').find('li').append('<hr width="40%">');

Die Frage ist also, wie ich <hr width="40%"> an each<li> einer bestimmten Liste anhängen könnte, indem Sie css3 verwenden.

htmlcsshtml5css3css-selectors
22
ProfHase85

jQuery-Lösung

Ich habe gerade erkannt, dass Sie das hr -Element in li schachteln möchten, bevor Sie es schließen. Ja, es ist vollkommen gültig. Verwenden Sie einfach append(). Beachten Sie, dass Sie können dies nicht verwenden Nur CSS, da Sie DOM nicht mit CSS ändern können, müssen Sie jQuery oder JS verwenden

jQuery("ul li").append("<hr />");

Demo

CSS-Lösung

Wenn Sie kein zusätzliches Element benötigen oder keine jQuery-Lösung wünschen (wie Sie möchten)

Wenn Sie hr -Element als direktes untergeordnetes Element für ul -Element verwenden, ist dies kein gültiges Markup. Stattdessen können Sie einen border-bottom für jeden li verwenden, der sich wie hr do verhält. Wenn Sie jedoch einen expliziten Weg wollen, zum Beispiel zur Steuerung der width des Trennzeichens, ohne die width von li zu ändern, können Sie dies auf diese Weise tun

Demo

ul li:after {
    content: "";
    display: block;
    height: 1px;
    width: 40%;
    margin: 10px;
    background: #f00;
}

Hier erstelle ich ein virtuelles block -Ebenenelement, das im DOM zwar nicht vorhanden ist, aber nur das tut, was Sie brauchen. Sie können das Element genauso gestalten, wie Sie es mit einem normalen div gestalten. Sie können auch border verwenden, aber um die dünne Linie horizontal zentriert zu halten, habe ich height: 1px; zugewiesen und dann margin für den Abstand verwendet.

40
Mr. Alien

Ich denke, es ist besser, CSS dafür zu verwenden. Sie können beispielsweise das <hr>-Tag nicht mehr verwenden, sondern Folgendes tun:

<ul class="mylist">
    <li>
        moooo!
    </li>
    <li>
        maaaaa!
    </li>
    ...
</ul>

und dann mit CSS:

.mylist li { border-bottom: 1px solid black; }

Es gibt auch andere Optionen. Wenn Sie beispielsweise die horizontale Linie nur für einige Listenelemente anzeigen möchten, können Sie ihnen eine Klasse zuweisen und eine CSS-Regel nur für diese Klasse hinzufügen. so was:

<ul class="mylist">
    <li class="hr">
        moooo!
    </li>
    <li>
        maaaaa!
    </li>
    ...
</ul>

und CSS:

.mylist li.hr { border-bottom: 1px solid black; }
20
Farid Rn

Sie können wie folgt verwenden: 

<ul>
   <li></li>
</ul>
<hr/>

Das ist einfach. Wenn Sie ul und li verschachtelt haben, verwenden Sie li anstelle von <hr/> oder einfach <hr/> innerhalb eines <li></li>-Tags. Siehe unten. Es ist rein Ihre Wahl.

<ul>
  <li>
    <ul><li></li></ul>
  </li>
  <li style="height:1px;border:solid 1px #666"> </li> // or you can also use 
  <li><hr/></li>
  <li> 
    <ul>
      <li></li>
    </ul>
  </li>
</ul>
2
user240141

Fügen Sie eine Class ein, die einen bottom-border: für jeden <li> erstellt.

<!--########## STYLE EACH li USING CLASS ##########-->
<style>
  .hr {
     width:40%;
     border-bottom:1px solid rgba(0,0,0,.7);
   }

</style>

<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
    -CONTENT-

</li>
<li class="hr">
    -CONTENT-
</li>
...

0
Dev_x7xClownx7x

Tags im Inhalt sind nicht erlaubt und auch wenn es sehr irreführend wäre ( css {content: "text"}, Wie füge ich Tags hinzu? )

Wenn Sie denken, dass es falsch ist, <hr> in HTML hinzuzufügen, ist es falsch, css (wenn möglich) oder js hinzuzufügen. IMHO a first Sie sollten versuchen, den Rand von <li> zu verwenden, wenn das Ergebnis nicht wie erwartet ist, fügen Sie den <hr> hinzu.

0
kwarunek