HTML UL CSS стиль границы - PullRequest
Новая
       3

HTML UL CSS стиль границы

4 голосов
/ 26 февраля 2011

У меня небольшой вопрос по поводу html-списков и CSS. Я хочу иметь список (ничуть подсписок), который выглядит следующим образом (просмотреть результат, скопировав код в http://htmledit.squarefree.com/):

 <style type="text/css">
 ul
 {
  border: 0px solid #90bade;
 }
 li
 { 
  list-style-type:none;
  border: 1px solid black;
 }
 .lv1
{
   margin:0px 0px 0px 10px;
}

</style>

<ul>
  <li>One</li>
  <li class ="lv1">Sub</li>
  <li>One</li>
</ul>

Но я бы предпочел использовать html-код для списка: 

<ul>
  <li>One
     <ul>
        <li>Sub</li>
     </ul>
  </li>
  <li>One</li>
</ul>

К сожалению, я не могу понять, как стилизовать второй список с помощью CSS, чтобы он выглядел как первый. Кто-нибудь знает, возможно ли это только с помощью CSS, или мне нужно составить один большой список и использовать классы (как в первом списке), чтобы получить желаемый макет?

Заранее спасибо

Ответы [ 3 ]

5 голосов
/ 26 февраля 2011

Вы можете заключить текст в div и задать div желаемую границу. Добавьте стиль для div в ваш CSS и удалите границу из вашего li. Это должно делать свое дело. Я не вижу возможного решения без редактирования HTML. 

.border {      
  border: 1px solid black; 
}

    <ul>   
      <li>
        <div class="border">One</div>
        <ul>
          <li><div class="border">Sub</div></li>
        </ul>
      </li>   
      <li><div class="border">One</div></li>
    </ul>
0 голосов
/ 12 мая 2016

Заменить тип стиля списка: нет;
на позицию стиля списка: внутри; 

li
 { 
  list-style-position:inside;
  border: 1px solid black;
 }
0 голосов
/ 26 февраля 2011

Как сказал Элвис, вы можете добавить

в , но вы можете избежать «класса», например: 
 <style type="text/css">
 ul
 {
  border: 0px solid #90bade;
 }
 li
 { 
  list-style-type:none;
  border: 0px solid black;
 }

 ul li div 
 {
   border:1px solid black
 }

</style>

<ul>
  <li><div>One</div>
     <ul>
        <li><div>Sub</div></li>
     </ul>
  </li>
  <li><div>One</div></li>
</ul>
...