1

ここに表示されます: http://jsfiddle.net/USy5L/

CSS:

.upload {
    display: inline;
    margin: 0 auto 15px auto;
    width: 400px;
    height: 50px;

    background: #fffbed;
    border: 1px solid #efdec4;
    border-radius: 5px;
    -moz-box-shadow: 0px 2px 4px rgba(236, 229, 199, 0.3), inset 0px 0px 3px 1px rgba(236, 229, 199, 0.5);
    -webkit-box-shadow: 0px 2px 4px rgba(236, 229, 199, 0.3), inset 0px 0px 3px 1px rgba(236, 229, 199, 0.5);
    box-shadow: 0px 2px 4px rgba(236, 229, 199, 0.3), inset 0px 0px 3px 1px rgba(236, 229, 199, 0.5);
}

input[type="button"] {
    width: 120px;
    height: 50px;
    float: right;

    border: 1px solid #4b2218;
    border-radius: 5px;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

    background: #a35a47; /* Old browsers */
}

.filename {
    margin: 14px 0 0 14px;

    color: #bf9e7b;
    float: left;
    font-size: 1.2em;
    font-style: italic;
}

HTML:

<div class="upload">
    <input type="button" value="Browse">
    <span class="filename">No file selected</span>
</div>

何が間違っているのかわかりません。display:block を使用すると意図したとおりに完全に機能しますが、同じ行に別のボタンが必要なため、インラインにする必要があります。

インスペクターを使用すると、幅なしで表示され、親 div の幅を想定しています。ただし、幅を設定します。インライン要素で幅が設定されませんか?

どうすればいいですか？

4

1 に答える 1

1

inline-block単に の代わりに試してくださいinline。または、要素をフロートします (フロートされた要素は暗黙的に として表示されblockます)。

お気づきのように、インライン要素の幅を設定しても効果はありません。

于 2013-02-04T23:50:48.657 に答える