floating divs in list items

I have a list with two <div>s in every <li> and I want to float them one next to the other and I want the <li> to take the whole availabe space. How do I do it?

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

标签： html css css-float

7条回答

疯言疯语

2楼-- · 2019-08-02 20:01

I assume by take the whole space you mean a width of 100%. I would also assume that you do not want styling applied to the list, which is why I have removed it in this example. This is also hack-free. You need not clear anything, so long as your list item has a width and the overflow: hidden property/value pair.

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

0人赞添加讨论(0) 举报

Bombasti

3楼-- · 2019-08-02 20:04

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

Should do the trick.

0人赞添加讨论(0) 举报

Animai°情兽

4楼-- · 2019-08-02 20:14

Without checking to make sure, this should work


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

0人赞添加讨论(0) 举报

劫难

5楼-- · 2019-08-02 20:23

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

That should do as required from my knowledge of CSS

0人赞添加讨论(0) 举报

做个烂人

6楼-- · 2019-08-02 20:24

I see this is an old post but if someone runs into the same issue think about this:

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

You can use span instead of div

To get a div besides the other or horizontally you have to apply brute force with .css but if you use span it will naturally. Copy and paste the following code in a html and see what I'm talking about:

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

Also, at least for Microsoft <li><div></div></li> won't validate.

0人赞添加讨论(0) 举报

\"骚年 ilove

7楼-- · 2019-08-02 20:26

For the divs, you just need to float left and the li, you want to do a clear. So:

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

0人赞添加讨论(0) 举报

1 2 下一页

floating divs in list items

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间