html - Fill a block element with left most floating child (float: right)

Question

I need to fill a <LI> width element with his most left child (out of three childs). Those three childs are formated with display: inline-block; float: right.

what i achieved so far:

enter image description here

what i expected to achieve:

enter image description here

It's obviously that width: 66% don't help anyway. Also a 100% width will not work.

I found this question on stackoverflow, but I need something made in pure CSS, no JS, jQuery, etc. Also, using a table is not a solution for me.

If the HTML code can help in this matter:

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

Thanks for your time,

SYNCRo,

score 1 · Accepted Answer

Having corrected your invalid HTML (as noted in the comment to your question no element other than an li is a valid child of a ul or ol, including those elements themselves) to the following:

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

Note that I had to add a class to those li elements that contain children (since the previous, simple, li selector now matches the multiple elements in the hierarchy), in this case the class items, but adjust to taste.

The following CSS works, albeit only with a pretty up-to-date browser:

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.

This uses the CSS calc() function to determine the width of the input element as a calculation.

To be cross-browser compatible with the older browsers you could use, instead, absolute (for the .save and .cancel elements) and relative (for the li elements) positioning:

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.

You'll note that the padding gets added to the width of the li elements, of course, so you may wish to add the box-sizing CSS property to compensate for that:

/* 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.

References:

score 0 · Accepted Answer

try this: just add another class with other width

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>

</p>

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

html - Fill a block element with left most floating child (float: right)

2 回答 2

Related

Reference