Заполнить всю строку LI с помощью CSS
У меня есть эти вложенные ul и li. Когда я заполняю цвет фона, вложенные ли листья имеют отступую часть белого цвета. У меня есть такое количество li, которое заполняется из базы данных, поэтому я не могу дать маржу, оставленную отдельным текстом в li. Как я могу сделать это, чтобы фон заполнил всю строку вместе с отступом?
Сейчас это выглядит как
![enter image description here]()
Я хочу, чтобы это было так
![enter image description here]()
Любые предложения, как это сделать? Заранее спасибо. Я не могу изменить 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>
Сначала сохраните изображение на локальном диске или перетащите его в новый браузер вкладки, чтобы увидеть более заметный.
![enter image description here]()
Ответ 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 в зависимости от глубины вашей структуры, но это должно дать вам очень хорошую основу.
