плавающие div в элементах списка - PullRequest
Новая
       35

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

1 голос
/ 18 сентября 2008

У меня есть список с двумя <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 ]

4 голосов
/ 18 сентября 2008 
 *{ 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; }

Должен сделать свое дело.

2 голосов
/ 18 сентября 2008

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

li
{
    clear: left;
}
.a
{
    float: left;
}
.b
{
    float: left;
}
1 голос
/ 24 января 2013

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

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

Вы можете использовать span вместо div

Чтобы получить 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> не будет проверяться.

0 голосов
/ 18 сентября 2008

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

ul,
li {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    overflow: hidden;
}
li div.a,
li div.b {
    float: left;
}
0 голосов
/ 18 сентября 2008 
li { width: 100%;}
.a { float: left;}
.b { float: left;}
0 голосов
/ 18 сентября 2008

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


LI { width: 100%; }
.a { float: left; }
.b { float: right; }
0 голосов
/ 18 сентября 2008 
li{width:100%;}
.a{}
.b{float: left;}

Это должно быть сделано в соответствии с моими знаниями CSS

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

Нет похожих вопросов

...