плавающие divs в элементе списка

У меня есть список с двумя <div> s в каждом <li>, и я хочу поплавать ими один рядом с другим, и я хочу, чтобы <li> взял все пространство. Как мне это сделать?плавающие divs в элементе списка

<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>

источник

2008-09-18 Raanan Avidor

*{ 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; }

Если сделать трюк.

источник

2008-09-18 15:36:19

-1

li{width:100%;} 
.a{} 
.b{float: left;}

Это должно делать, как требуется от моего знания CSS

источник

2008-09-18 15:36:02 workmad3

Без проверки, чтобы убедиться, что это должно работать


LI { width: 100%; } 
.a { float: left; } 
.b { float: right; }

источник

2008-09-18 15:36:05

Для divs вам просто нужно плавать влево и влево, вы хотите сделать ясный. Итак:

li 
{ 
    clear: left; 
} 
.a 
{ 
    float: left; 
} 
.b 
{ 
    float: left; 
}

источник

2008-09-18 15:38:14 AdamB

Вы должны указать ширину на плавающих элементах, иначе вы не получите эффект 2-столбца, который вам нужен. 49,9%, или что-то должно это сделать. – roborourke 2009-01-26 10:42:36

li { width: 100%;} 
.a { float: left;} 
.b { float: left;}

источник

2008-09-18 15:39:01 Bloodhound

Пожалуйста, добавьте несколько пояснений к вашему коду – 2016-01-14 22:00:29

Я полагаю, по взять все пространство вы имеете в виду ширину 100%. Я также предполагаю, что вы не хотите, чтобы стиль применялся к списку, поэтому я удалил его в этом примере. Это также без взлома. Вам не нужно ничего прояснить, если ваш элемент списка имеет ширину и пару переполнений: скрытое свойство/значение.

ul, 
li { 
    width: 100%; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
li { 
    overflow: hidden; 
} 
li div.a, 
li div.b { 
    float: left; 
}

источник

2008-09-18 16:15:26

Я вижу, что это старый пост, но если кто-то работает в том же номере думать об этом:

<div>A block-level section in a document</div> 
<span>An inline section in a document</span>

Вы можете использовать диапазон вместо ДИВ

Чтобы получить a div кроме другого или по горизонтали вы должны применить грубую силу с. css но если вы используете span это будет естественно. Скопируйте и вставьте следующий код в 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> не будет проверять.

источник

2013-01-24 17:56:32 Labanino

плавающие divs в элементе списка

ответ

Смежные вопросы