用最左边的浮动子元素填充块元素（float：right）答案

【问题标题】：Fill a block element with left most floating child (float: right)用最左边的浮动子元素填充块元素（float：right）
【发布时间】：2012-11-04 22:24:04
【问题描述】：

我需要用他最左边的孩子（三个孩子中的）填充<LI> 宽度元素。这三个孩子的格式是display: inline-block; float: right。

到目前为止我所取得的成就：

我期望达到的目标：

显然width: 66% 无论如何也帮不上忙。 100% 的宽度也不起作用。

我在 stackoverflow 上找到了这个 question，但我需要用纯 CSS 制作的东西，没有 JS、jQuery 等。另外，使用表格对我来说不是一个解决方案。

如果 HTML 代码可以帮助解决这个问题：

<style type="text/css">
    div {
        width: 200px;
        border: 1px solid red;
    }
    ul {
        padding: 0px 0px 0px 20px;
        margin: 0px;
    }
    li {
        display: block;
        white-space: nowrap;
        list-style-type: none;
        display: block;
        height: 20px;
        padding: 0px;
        margin: 1px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;

        border-color: #D5AB55 #C93 #C93 #D5AB55;
        background-color: #F3CE00;
    }

    .name {
        display: inline-block;
        float: right;
        height: 18px;
        width: 65%;
        margin: 0px;
        padding: 0px 2px;
        border: 1px solid grey;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }
    .save, .cancel {
        display: inline-block;
        float: right;
        height: 20px;
        width: 20px;
        margin: 0px 0px 0px 1px;
        padding: 0px;
        border: 1px solid grey;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }
    .save   { background: url(../images/confirm.png) no-repeat center center; }
    .cancel { background: url(../images/cancel.png) no-repeat center center; }
</style>

<div>
    <ul>
        <li>
            <input type="button" value="" class="cancel">
            <input type="button" value="" class="save">
            <input type="text" value="Big list item" class="name">
        </li>
        <ul>
            <li id="category_2" id_category="2">
                <input type="button" value="" class="cancel">
                <input type="button" value="" class="save">
                <input type="text" value="Medium list item" class="name">
            </li>
            <ul>
                <li>
                    <input type="button" value="" class="cancel">
                    <input type="button" value="" class="save">
                    <input type="text" value="1st small item" class="name">
                </li>
                <li>
                    <input type="button" value="" class="cancel">
                    <input type="button" value="" class="save">
                    <input type="text" value="2nd small item" class="name">
                </li>
                <li>
                    <input type="button" value="" class="cancel">
                    <input type="button" value="" class="save">
                    <input type="text" value="3rd small item" class="name">
                </li>
            </ul>
        </ul>
    </ul>
</div>

感谢您的宝贵时间，

同步，

【问题讨论】：

您意识到您的 HTML 无效，对吧？ ul（或ol）的唯一有效子元素是li 元素：将ul 直接嵌套在另一个ul 中不是有效的HTML（它们需要包含在父 li 标记中）。

标签： html css fill-parent

【解决方案1】：

已更正您的无效 HTML（如对您的问题的评论中所述no 元素，li 以外的元素是 ul 或 ol 的有效子元素，包括这些元素本身）到以下内容：

<div>
    <ul>
        <li class="items">
            <input type="button" value="" class="cancel" />
            <input type="button" value="" class="save" />
            <input type="text" value="Big list item" class="name" />
        </li>
        <li>
        <ul>
            <li id="category_2" id_category="2" class="items">
                <input type="button" value="" class="cancel" />
                <input type="button" value="" class="save" />
                <input type="text" value="Medium list item" class="name" />
            </li>
            <li>
            <ul>
                <li class="items">
                    <input type="button" value="" class="cancel" />
                    <input type="button" value="" class="save" />
                    <input type="text" value="1st small item" class="name" />
                </li>
                <li class="items">
                    <input type="button" value="" class="cancel" />
                    <input type="button" value="" class="save" />
                    <input type="text" value="2nd small item" class="name" />
                </li>
                <li class="items">
                    <input type="button" value="" class="cancel" />
                    <input type="button" value="" class="save" />
                    <input type="text" value="3rd small item" class="name" />
                </li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
</div>

请注意，我必须向那些包含子元素的li 元素添加一个类（因为之前的简单li 选择器现在匹配层次结构中的多个元素），在本例中为类items，但要适应口味。

以下 CSS 有效，尽管仅适用于相当最新的浏览器：

li {
    width: 80%;
    clear: both;
    float: right;
    margin: 0 0 0.2em 0;
}

li.items {
    background-color: #f90;
}

li .save, li .cancel {
    float: right;
    width: 20px;
    height: 20px;
}

input.name {
    width: -webkit-calc(100% - 45px);
    width: -moz-calc(100% - 45px);
    width: -o-calc(100% - 45px);
    width: -ms-calc(100% - 45px);
    width: calc(100% - 45px);
}

JS Fiddle demo.

这使用 CSS calc() 函数来确定 input 元素的宽度作为计算。

为了与旧版浏览器兼容，您可以使用绝对（对于.save 和.cancel 元素）和相对（对于li 元素）定位：

li {
    width: 80%;
    clear: both;
    float: right;
    margin: 0 0 0.2em 0;
    position: relative;
}

li.items {
    background-color: #f90;
    padding: 0 45px 0 0;
}

li .save, li .cancel {
    position: absolute;
    width: 20px;
    height: 20px;
}

.save {
    top: 0;
    right: 21px;
}

.cancel {
    top: 0;
    right: 0;
}

input.name {
    width: 100%;
}

JS Fiddle demo.

您会注意到padding 被添加到li 元素的宽度上，当然，因此您可能希望添加box-sizing CSS 属性来弥补这一点：

/* all other CSS remains untouched */
li {
    width: 80%;
    clear: both;
    float: right;
    margin: 0 0 0.2em 0;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

JS Fiddle demo.

参考资料：

CSS box-sizing。
CSS calc()。

【讨论】：

惊人的答案，非常感谢。给我一些时间来消化它，我会将您的答案设置为接受的答案。再次感谢。是的，看起来无效的
- 树会影响我的最终布局。从来没有这样，大声笑
不客气，希望对您有所帮助！ =)

【解决方案2】：

试试这个：只需添加另一个宽度不同的类

HTML：

<div>
<ul>
    <li>
        <input type="button" value="" class="cancel">
        <input type="button" value="" class="save">
        <input type="text" value="Big list item" class="name_big_list">
    </li>
    <ul>
        <li id="category_2" id_category="2">
            <input type="button" value="" class="cancel">
            <input type="button" value="" class="save">
            <input type="text" value="Medium list item" class="name_medium_list ">
        </li>
        <ul>
            <li>
                <input type="button" value="" class="cancel">
                <input type="button" value="" class="save">
                <input type="text" value="1st small item" class="name">
            </li>
            <li>
                <input type="button" value="" class="cancel">
                <input type="button" value="" class="save">
                <input type="text" value="2nd small item" class="name">
            </li>
            <li>
                <input type="button" value="" class="cancel">
                <input type="button" value="" class="save">
                <input type="text" value="3rd small item" class="name">
            </li>
        </ul>
    </ul>
</ul>

CSS：

 div {
    width: 200px;
    border: 1px solid red;
}
ul {
    padding: 0px 0px 0px 20px;
    margin: 0px;
}
li {
    display: block;
    white-space: nowrap;
    list-style-type: none;
    display: block;
    height: 20px;
    padding: 0px;
    margin: 1px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    border-color: #D5AB55 #C93 #C93 #D5AB55;
    background-color: #F3CE00;
}

.name, .name_big_list, .name_medium_list {
    display: inline-block;
    float: right;
    height: 18px;
    width: 65%;
    margin: 0px;
    padding: 0px 2px;
    border: 1px solid grey;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.name_big_list{
width: 73%
}
.name_medium_list{
width: 69%;
}
.save, .cancel {
    display: inline-block;
    float: right;
    height: 20px;
    width: 20px;
    margin: 0px 0px 0px 1px;
    padding: 0px;
    border: 1px solid grey;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.save   { background: url(../images/confirm.png) no-repeat center center; }
.cancel { background: url(../images/cancel.png) no-repeat center center; }

【讨论】：

很抱歉，如果我将 div 的宽度更改为 300px，我将不得不重新计算所有百分比。在我的示例中，我只有三种类型的列表项。实际上，我永远不会知道列表的真正深度。