html - ブロック要素を左端のフローティングの子で埋めます (float: right)

Question

<LI>width 要素を彼の一番左の子 (3 つの子のうち) で埋める必要があります。これらの 3 つの子はでフォーマットされdisplay: inline-block; float: rightます。

私がこれまでに達成したこと:

ここに画像の説明を入力

私が達成することを期待したもの：

ここに画像の説明を入力

width: 66%とにかく役に立たないことは明らかです。また、100% の幅は機能しません。

この質問は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>

御時間ありがとうございます、

シンクロ、

score 1 · Accepted Answer

無効な HTML (質問へのコメントに記載されているように、an 以外のli要素は aulまたはの有効な子ではなく、それらの要素自体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セレクターが階層内の複数の要素と一致するようになったため)、この場合は classitemsですが、好みに合わせて調整します。

次の 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 フィドルのデモ。

これは 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 フィドルのデモ。

paddingもちろん、要素の幅にが追加されることに注意してください。そのため、それを補うために CSS プロパティをli追加することをお勧めします。box-sizing

/* 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 フィドルのデモ。

参考文献:

CSSbox-sizing .
CSScalc() .

score 0 · Accepted Answer

これを試してください：他の幅の別のクラスを追加するだけです

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 - ブロック要素を左端のフローティングの子で埋めます (float: right)

2 に答える 2

Related

Reference