html - 用最左边的 float 子元素填充 block 元素(float : right)

Question

我需要填写一个 <LI> width 元素与他最左边的 child (三个 child 中)。这三个 child 的格式为 display: inline-block; float: right .

到目前为止我取得了什么:

我期望实现的目标:

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

我找到了这个 question在 stackoverflow 上，但我需要用纯 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>

谢谢你的时间，

同步，

Answer 1

已更正您的无效 HTML(如对您问题的评论中所述，没有元素 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() .