плавающие элементы div в элементах списка
Вопрос
У меня есть список из двух <div>
это в каждом <li>
и я хочу расположить их рядом друг с другом, и я хочу, чтобы <li>
чтобы занять все доступное пространство.Как мне это сделать?
<html>
<head>
<title></title>
<style type="text/css">
body {
}
ul {
}
li {
}
.a {
}
.b {
}
</style>
</head>
<body>
<ul>
<li>
<div class="a">
content
</div>
<div class="b">
content
</div>
</li>
</ul>
</body>
</html>
Решение
*{ margin: 0; padding: 0;}
li{ width: 100%: display: block; }
li:after{ clear: both; }
div.a{ width: 49%; float: left; }
div.b{ width: 49%; float: left; }
Должно сработать.
Другие советы
Для элементов div вам просто нужно сместиться влево, а li нужно очистить.Так:
li
{
clear: left;
}
.a
{
float: left;
}
.b
{
float: left;
}
Я вижу, что это старый пост, но если кто-то столкнется с той же проблемой, подумайте об этом:
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Вы можете использовать охватывать вместо div
Чтобы получить div помимо другого или по горизонтали вам придется применить грубую силу с помощью .CSS но если вы используете охватывать это будет естественно.Скопируйте и вставьте следующий код в HTML и посмотрите, о чем я говорю:
<ul>
<li>
<div style="background-color:red">red</div>
<div style="background-color:blue">blue</div>
</li>
<li>
<span style="background-color:red">red</span>
<span style="background-color:blue">blue</span>
</li>
</ul>
Также, по крайней мере, для Microsoft <li><div></div></li>
не будет проверять.
Не проверяя, чтобы убедиться, это должно работать
LI { width: 100%; }
.a { float: left; }
.b { float: right; }
Я предполагаю, что, говоря «все пространство», вы имеете в виду ширину 100%.Я также предполагаю, что вы не хотите, чтобы к списку применялся стиль, поэтому я удалил его в этом примере.Это также не требует взлома.Вам не нужно ничего очищать, если ваш элемент списка имеет ширину и переполнение:скрытая пара свойство/значение.
ul,
li {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
overflow: hidden;
}
li div.a,
li div.b {
float: left;
}
li { width: 100%;}
.a { float: left;}
.b { float: left;}
li{width:100%;}
.a{}
.b{float: left;}
Это должно соответствовать моим знаниям CSS.