Заполнить всю строку LI с помощью CSS

У меня есть эти вложенные ul и li. Когда я заполняю цвет фона, вложенные ли листья имеют отступую часть белого цвета. У меня есть такое количество li, которое заполняется из базы данных, поэтому я не могу дать маржу, оставленную отдельным текстом в li. Как я могу сделать это, чтобы фон заполнил всю строку вместе с отступом?

Сейчас это выглядит как

Я хочу, чтобы это было так

Любые предложения, как это сделать? Заранее спасибо. Я не могу изменить html-разметку, так как мне придется менять много кода. Есть ли способ сделать это, используя эту разметку. эти li идут из запроса db, поэтому я не имею точного числа li в этом случае.

Демо http://jsbin.com/uReBEVe/1/

Ответ 1

Лучше всего использовать структуру, которая упрощает управление базой данных, html и (CSS).

HTML:

<body>
<ul class="main">
    <li>1.</li>
    <li><ul>2</ul></li>
    <li><ul><li><ul>3.</ul></li></ul></li>
</ul>
</body>

CSS

.main{
    position:relative;
    right:40px;
}
li{
    list-style:none;
    background:red;
    margin-top:1px;
}

Fiddle 1.

Я не знаю, является ли ul не содержащий li допустимым или недействительным. Если его значение недействительно, вы можете использовать:

<body>
<ul class="main">
    <li>1.</li>
    <li><ul><li>2</li></ul></li>
    <li><ul><li><ul><li>3.</li></ul></li></ul></li>
</ul>
</body>

Fiddle 2

Ответ 2

По умолчанию <ul> имеет padding-left для размещения точки маркера.

Если вы добавите это в свой CSS:

ul {padding-left:0}
ul>li {padding-left:40px}

Вы должны получить необходимый эффект.

EDIT: Также вам нужно исправить свой HTML: p <ul> может ТОЛЬКО иметь <li> как детей.

Ответ 3

Гибкое многоуровневое решение для размещения

Это очень похоже на другой вопрос, на который я ответил здесь, и я составил для вас аналогичное решение ниже. Вам понадобится действительный html, имея все вложенные элементы li внутри их собственного ul (как это отметили другие здесь), и было бы лучше всего контролировать все это некоторым классом в самом внешнем ul (хотя это не требуется, но делает таргетинг на этот список намного проще).

Ключевым здесь является снабжение background псевдоэлементом :before, который предназначен для охвата всей ширины внешнего ul.

Вот мой демон jsbin.

HTML

  <ul class="full-width-list">
    <li>A</li>
    <li>
      <ul>
        <li>B</li>
        <li>
          <ul>
            <li>B</li>
          </ul>
        </li>  
      </ul>
    </li>
  </ul>

CSS

.full-width-list {
  position: relative;
  padding: 0 0 0 4px;
}

.full-width-list ul {
  margin: 0;
  padding: 0
}

.full-width-list li {
  list-style:none;
  padding: 0;
  margin: 0;
  height: 1.2em;
  line-height: 1.2em;
}

.full-width-list ul > li {
  margin-top: 4px;
  padding: 0 0 0 36px;  
}

.full-width-list li:first-child:before {
      content: '';
      height: 1.2em;
      position: absolute;
      left: 0;
      right: 0;
      z-index: -1;
      background:red;  
}

.full-width-list li:first-child:hover:before {
  background:green
}

Ограничения

Это решение имеет два основных ограничения:

Ни один из элементов ul или li не может содержать position, кроме установленного по умолчанию static, поскольку псевдоэлемент :before элементов li должен иметь свой единственный позиционированный родительский элемент .full-width-list.
Для элементов li должен быть набор height. В моем примере я использую 1.2em, но любой height, который вы устанавливаете, означает, что элементы li не могут перейти к двум или более строкам текста (так что это решение работает только с одной строкой текста).

Ответ 4

Это работает на произвольных глубинах без взлома или ерунды.

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

Идея проста: установите a: перед селектором, который поместит левый и правый края по абсолютному позиционированию и окрасит цвет фона. Вам нужно установить z-index: поместить его за свой контент, содержимое: '\ 0020', чтобы заставить его рисовать (это неразрывное пространство), и вы хорошо.

Вы можете связать это, установив его в позицию: относительный контейнер.

<!doctype html>
<html>

  <head>

    <style>

      li { 
          list-style-type : none; 
          margin-bottom   : 0.25em;
      }

      li:before { 
          position         : absolute; 
          left             : 0;
          right            : 0;
          background-color : #eef;
          content          : "\00a0";
          z-index          : -1;
      }

    </style>

  </head>

  <body>

    <ul>
      <li>Test</li>
      <li><ul>
        <li>Test</li>
        <li><ul>
          <li>Test</li>
        </ul></li>
      </ul></li>
    </ul>

  </body>

</html>

Ответ 5

Вы можете сделать это с помощью :before взлома, поскольку у вас нет доступа к коду

Рабочая демонстрация jsBin

CSS

li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute; left:0; z-index: -1;}

Ответ 6

Ваша разметка сломана, вы должны вложить li в один ul, как это:

<ul>
   <li>Text</li>
   <li>Text 1</li>
</ul>

Это была ваша разметка

<ul>
  <li>A</li>
  <ul>
    <li>B</li>
    <ul>
      <li>B</li>
    </ul>
  </ul>
<ul>

Я предполагаю, что вы видите, почему это неправильно.

Я исправил JSBin для вас, и он имеет правильный эффект.

EDIT: вы можете, конечно, добавить padding-left, перейдя по всем li с помощью javascript.

Ответ 7

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

Разметка:

  <ul>
    <li>A</li>
    <li><p>B</li>
    <li><p><p>B</li>
    <li><p><p><p>B</li>
    ....
  </ul>

И CSS:

li p {
  padding-left: 1em;
  display: inline;
}

JSbin

Тег

p является необязательным для закрытия в подмножестве HTML и обычно должен работать в каждом браузере в любом случае независимо от типа doctype. Если вы находитесь на xHTML и беспокоитесь о проверке, опция может использовать закрывающие теги, например:

  <ul>
    <li>A</li>
    <li><p></p>B</li>
    <li><p></p><p></p>B</li>
    ....
  </ul>

Ответ 8

Попробуйте следующее:

<ul class="lvl1">
  <li>A</li>
  <ul class="lvl2"><li>B</li>
   <ul class="lvl3"><li>B</li></ul>
    </ul>
</ul>

li {
  background: none repeat scroll 0 0 #FF0000;
  list-style: none outside none;
  margin-top: 4px;
}
ul { padding:0px;}
ul.lvl1>li {padding-left:30px;}
ul.lvl2>li {padding-left:60px;}
ul.lvl3>li {padding-left:90px;}

Смотрите здесь: http://jsfiddle.net/x5K4a/

Ответ 9

1) Ваш HTML недопустим (отсутствует <li> вокруг <ul>)

2) Единственный способ сделать отступ работает так, как вы ожидали, это правило CSS для каждого уровня.

ul ul li.line { padding-left: 20px !important }
ul ul ul li.line { padding-left: 40px !important; }
...

http://jsbin.com/uReBEVe/12/edit

Ответ 10

если речь идет только об фоновом цвете, вы можете использовать тень того же цвета. http://codepen.io/gc-nomade/pen/fxBAl (исправлена структура html)

<ul class="ulparent">
  <li>
    <p>A</p>
    <ul>
      <li>
        <p>B</p>
        <ul>
          <li>
            <p>B</p></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

.ulparent {overflow:hidden;}
li p {background:green;box-shadow:-200px 0 0 green;/* -200px for instance or whatever suits your need */margin:4px 0;}
li p:hover {background:red;box-shadow:-200px 0 0 red;}

Иначе, если это фоновое изображение, я бы использовал псевдоэлемент и background-attachment:fixed; (демонстрацию, включенную в codepen, используя линейный градиент как изображение)

Ответ 11

Я собираюсь дать вам правильную идею о применении правил CSS для содержимого HTML. Ниже приведены правила CSS, которые я создал, просто скопируйте их и посмотрите на ответ. Это детский комбинатор, который я использовал! ответы, предоставленные разными пользователями, которые не соблюдают правила CSS. Просто дай мне знать! Надеюсь, ответ!

<!DOCTYPE html>
<html>
<head>
<title>Test</title>

<style type="text/css">
li{
  list-style:none;
  background:red;
  margin-top:4px;

}
body>ul>ul>li{
  margin: 4px 0 0 -40px;
  }
body>ul>ul>ul>li{
  margin: 4px 0 0 -80px;
  }
body>ul>ul>li {
   padding:0px 0px 0px 40px;
}
body>ul>ul>ul>li{
  padding:0px 0px 0px 80px;
}
li:hover{
        background:green;
        }
</style>
</head>
<body>
  <ul>
    <li>A</li>
    <li>
      <ul>
      <li>B</li>
      <li>
        <ul>
            <li>C</li>
        </ul>
      </li>
      </ul>
    </li>
  </ul>
</body>
</html>

Сначала сохраните изображение на локальном диске или перетащите его в новый браузер вкладки, чтобы увидеть более заметный.

Ответ 12

Вы можете добавить этот CSS в свой код, чтобы получить желаемые результаты:

li {
    list-style: none;
    background: red;
    margin-top: 4px;
}
ul {
    padding: initial !important;
}

ul ul li {
    padding-left: 40px;
}
ul ul ul li {
    padding-left: 80px;
}
li:hover {
    background: green;
}

Результат на jsbin находится здесь: http://jsbin.com/uReBEVe/33/edit

Ответ 13

Вот правильная структура HTML, которой вы должны следовать, причем каждый элемент UL имеет два элемента LI. Один для значения каждой строки и один как родительский для следующего значения отступа.

<ul>
    <li>A</li>
    <li>
        <ul>
          <li>B</li>
          <li>
              <ul>
                <li>C</li>
              </ul>
          </li>
        </ul>
     <li>  
</ul>

Для CSS это решение требует, чтобы у вас было максимальное количество уровней в иерархии списков (см. комментарий к коду)

li {
    list-style:none;
    padding-left:0px;
    box-sizing:border-box;
}

ul {
    padding-left:0
}

ul > li:nth-of-type(1):hover {
    background:green
}

ul li:nth-of-type(1) {
    padding-left:50px;
    background:red;
    margin-top:4px
}

ul li li:nth-of-type(1) {
    padding-left:100px;
}

ul li li li:nth-of-type(1) {
    padding-left:150px;
}

/* 
   Continue incrementing the padding for the li 
   children for however many levels you want
*/

Обратите внимание: селектор nth-of-type поддерживается всеми браузерами EXCEPT для IE8 и ниже.

См. JSBin для рабочего примера: http://jsbin.com/uReBEVe/51

Удачи!

Ответ 14

Оба UL и OL наследуют поля. Ваше исправление должно было бы обнулить маржу:

ul, ol    
{   
   margin:0;
}

Ответ 15

Очень неудобно, но он работает с небольшим подталкиванием в правильном направлении от jQuery. Не большая решимость, но решение тем не менее.

HTML

<ul>
    <li>A</li>
        <ul>
            <li>B</li>
                <ul>
                    <li>B</li>
               </ul>
        </ul>
</ul>

CSS

ul {
    list-style-type:none;
    margin-top:5px;
    padding-left:40px;
    float:left;
    width:400px;
    overflow:hidden;
    background:#ff0000;
}
li {
    padding-top:5px;
}
ul div {
    position:absolute;
    left:0;
    width:100%;
    border-top:3px solid #fff;
}

JQuery

$(document).ready(function(){
    $('ul').prepend('<div></div>');
});

jsFiddle здесь. Надеюсь, это сработает для вас!

Ответ 16

@AsrafulHaque имеет правильное представление об использовании дополнения для расширения ширины фона без изменения вложенных отступов.

Однако, поскольку вы не знаете, сколько <li> будет, вы не можете ожидать, что это будет чисто CSS-решение.

Вы пытаетесь сделать довольно неудобную вещь, но можно было бы перевернуть их и ввести динамическое дополнение с помощью javascript/jquery или что-то еще:

i = 40;
$('img.yourImageClass').each(function() {
    $(this).css('padding-left', i+'px');
    i = i + 40;
});

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

Ответ 17

Вы можете сделать это следующим образом:

HTML

 <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <ul class="mainUL">
  <li>A</li>
  <ul><li>B</li>
   <ul><li>C</li></ul>
    </ul>
  </ul>
</body>
</html>

Код CSS

li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute;left:0; z-index: -1;color:red;}
.mainUL {padding-left: 0px;}

Вы можете увидеть рабочую демонстрацию: http://jsbin.com/uReBEVe/71/edit

Ответ 18

из вашей демонстрации:

если вы примените

ul{ padding:0; margin:0; }

все сидит на стене, как вы хотите.

если вы хотите отступы текста

ul ul li{ text-ident:20px; }

который является гнездом. будет ориентироваться только на li, которые находятся в ul, которые вложены в ul. то то, что вы хотите, и вам не нужно менять код

вы также можете вставить этот код

добавьте больше ul и li в зависимости от глубины вашей структуры, но это должно дать вам очень хорошую основу.