it-swarm.com.ru

Добавить горизонтальное правило к каждому <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>"
}

так как контент будет избегать персонажей.

Я также делаю нет хочу использовать jQuery:

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

Итак, вопрос в том, как я могу добавить <hr width="40%"> к каждому<li> определенного списка, используя css3 ?

22
ProfHase85

Решение jQuery

Просто понял, что вы хотите вложить элемент hr в li перед тем, как закрыть его, да, это совершенно правильно, так что просто используйте append() и обратите внимание, что вы не можете этого делать, используя только CSS, так как вы не можете изменять DOM используя CSS, вам нужно использовать jQuery или JS

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

Демо


CSS Solution

Если вам не нужен дополнительный элемент или вам не нужно решение jQuery (как вы хотите)

Использование элемента hr в качестве прямого дочернего элемента к элементу ul не является допустимой разметкой, вместо этого вы можете использовать border-bottom для каждой li, которая будет вести себя так же, как 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 для увеличения.

40
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, тогда вы используете li вместо <hr/> или просто <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

Вставьте Class, который создает bottom-border: для каждого <li>

<!--########## 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"}, Как добавить теги? )

Если вы считаете неправильным добавлять <hr> в HTML, то неправильно добавлять css (если это возможно) или js. ИМХО сначала Вы должны попытаться использовать границу <li>, если результат не будет соответствовать ожидаемому, добавьте этот <hr>

0
kwarunek