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

Question 1

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:

Question 2

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>

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