Можем ли мы использовать любой другой тег внутри <ul>вместе с <li>? - PullRequest
Новая
       19

Можем ли мы использовать любой другой тег внутри <ul>вместе с <li>?

40 голосов
/ 29 января 2010

Можем ли мы использовать любой другой тег в <ul> вместе с <li>?

как 

<ul>
Some text here or <p>Some text here<p> etc
<li>item 1</li>
Some text here or <p>Some text here<p> etc
<li>item 1</li>
</ul>

Ответы [ 9 ]

47 голосов
/ 29 января 2010

Чтобы ваш код был действительным, вы не можете поместить любой тег внутри <ul>, кроме <li>.

Однако вы можете поместить любой элемент уровня блока внутри <li>, напримеритак: 

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>
12 голосов
/ 29 января 2010

В соответствии с Рекомендацией W3C базовая структура списка должна быть: 

<UL>
   <LI> ... first list item...
   <LI> ... second list item...
   ...
</UL>

Теги p можно размещать только внутри тегов li, а не как прямые потомки ul. В Рекомендации W3C прямо говорится:

списки состоят из последовательностей элементов списка, определенных элементом LI

5 голосов
/ 29 января 2010

Хотя у вас могут быть и другие теги (и они могут работать просто отлично), этого не должно быть, потому что они не совместимы с w3c. Это также имеет очень небольшой смысловой смысл.

Просто создайте простую страницу и запустите ее через валидатор (http://validator.w3.org/), и вы сами убедитесь:)

3 голосов
/ 24 февраля 2015

Вы можете использовать шаблон тега, и это абсолютно законно. Например: 

<ul>
**<template>**Some text here or <p>Some text here<p> etc**</template>**
<li>item 1</li>
**<template>**Some text here or <p>Some text here<p> etc**</template>**
<li>item 1</li>
</ul>
2 голосов
/ 11 сентября 2013

Нет, это будет неверная разметка.Однако, если вы пытаетесь добиться другого внешнего вида для некоторых строк, вы можете сделать это, добавив конкретное имя класса к любому тегу li.Смотрите ниже: 

<ul>
    <li class="foobar">Label</li>
    <li>Some text here</li>
    <li>Some text here</li>
    <li class="foobar">Label</li>
    <li>Some text here</li>
    <li>Some text here</li>
</ul>
1 голос
/ 29 января 2010

Вы можете написать такую ​​разметку, но вы не должны , поскольку она не соответствует требованиям, и вы можете получить странные и неожиданные результаты в разных браузерах.

0 голосов
/ 12 апреля 2015

Knockout.js конкретный ответ, вы можете использовать следующий синтаксис комментария. 

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

<script type="text/javascript">
    ko.applyBindings({
        myItems: [ 'A', 'B', 'C' ]
    });
</script>
0 голосов
/ 29 января 2010

если вы делаете это для стилизации части элемента списка, вы можете сделать это 

<ul>
  <li>normal text <span>bold text</span></li>
  <li>normal text <span>bold text</span></li>
</ul>

, а затем использовать CSS 

ul li {font-size: 12px; font-weight: normal;}
ul li span {font-size: 12px; font-weight: bold;}

надеюсь, это поможет

0 голосов
/ 29 января 2010

Нет. Если это список, в нем есть элементы списка. Я не вижу никакой пользы для списка, в котором нет элементов списка; это не список ...

...