web-dev-qa-db-ja.com

各<li>に水平ルールを追加します

<ul>リストの場合、リストの各要素の後に<hr>を追加します。結果は次のように表示されます。

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

<hr>を各<li>に追加するのは悪いスタイルなので、CSSのみを使用してこれを屈折させたいと思います。私は使用できません：

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

コンテンツが文字をエスケープするため。

私もnot jQueryを使いたい：

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

質問は、cssを使用して特定のリストのeach<hr width="40%">に<li>を追加するにはどうすればよいですか？

htmlcsshtml5css3css-selectors
23
ProfHase85

jQueryソリューション

hrを閉じる前にli要素内にネストしたいことに気付いた、はい、それは完全に有効です。したがって、単にappend()を使用して、CSSのみを使用してこれを行うことはできません、CSSを使用してDOMを変更できないため、jQueryまたはJSを使用する必要があります

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

デモ

CSSソリューション

余分な要素が必要ない場合、またはjQueryソリューションが必要ない場合（必要に応じて）

hr要素の直接の子としてul要素を使用することは有効なマークアップではなく、代わりにliごとにborder-bottomを使用できます。 hrは、明示的な方法が必要な場合でも、widthのwidthを変更せずにセパレータのliを制御する場合このようにすることができます

デモ

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

ここでは、仮想blockレベル要素を作成していますが、これは実際にはDOMには存在しませんが、必要なことを行うだけです。通常のdivをスタイルするのと同じ方法で、要素を設計することができます。これにborderを使用することもできますが、細い線を水平方向の中央に保つためにheight: 1px;を割り当て、marginを使用してスペースを空けます。

42
Mr. Alien

これにはCSSを使用した方が良いと思います。たとえば、<hr>タグの使用を停止し、代わりに次のようなことを行うことができます。

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

そして、CSSで：

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

他のオプションもあります。たとえば、一部のリストアイテムのみに水平線を表示する場合は、クラスにクラスを与え、そのクラスのみにCSSルールを追加できます。このような：

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

およびCSS：

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

次のように使用できます。

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

それは簡単です。 ulとliをネストしている場合、<hr/>の代わりにliを使用するか、<hr/>タグ内で単に<li></li>を使用します。下記参照。その純粋にあなたの選択。

<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

各bottom-border:に対して<li>を作成するClassを挿入します

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

コンテンツ内のタグは許可されておらず、非常に誤解を招く場合でも（ css {content： "text"}、タグを追加するにはどうすればよいですか？ ）

HTMLに<hr>を追加するのが間違っていると思う場合、css（可能であれば）またはjsを追加するのは間違っています。私見最初に<li>の境界線を使用して、結果が期待どおりにならない場合は、<hr>

0
kwarunek