Плавающие div в элементах списка (ul, li)
У меня есть список с двумя <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>
Ответы 7
li{width:100%;}
.a{}
.b{float: left;}
Это должно соответствовать моим знаниям CSS.
Без проверки, это должно работать
LI { width: 100%; }
.a { float: left; }
.b { float: right; }
*{ 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 вы хотите сделать clear. Так:
li
{
clear: left;
}
.a
{
float: left;
}
.b
{
float: left;
}
li { width: 100%;}
.a { float: left;}
.b { float: left;}
Я предполагаю, что, взяв все пространство, вы имеете в виду ширину 100%. Я также предполагаю, что вы не хотите, чтобы стиль применялся к списку, поэтому я удалил его в этом примере. Это тоже без взлома. Вам не нужно ничего очищать, если ваш элемент списка имеет ширину и пару свойство / значение overflow: hidden.
ul,
li {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
overflow: hidden;
}
li div.a,
li div.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> не будет проверяться.
Вы должны указать ширину для плавающих элементов, иначе вы не получите эффект двух столбцов, который вам нужен. 49,9% или около того должны это делать.