1

次の HTML を検討してください。

HTML:

<div class="container">
    <img src="img.jpg"/>
    <div class="bc">
        <input type="file"/>
        <button>Upload</button>    
    </div>
</div>

CSS:

.container {
    margin-left: 10% ;
    margin-right: 10% ;
    height: 100px ;
    background-color: lightgrey ;
}
img {
    height: 100% ;
}

.bc {
    display: inline-block;
    height: 100px;
    background-color: grey ;
    vertical-align:middle
}
input {
    visibility: hidden ;
    width: 0;
    height: 0;
    display:inline;
}

「入力」要素を削除すると、「bc」の幅はボタンとほぼ同じになりますが、それを前にすると、「bc」は（幅が）大きくなります。これが私のjsfiddleです。これがなぜなのか、その効果を元に戻す方法を誰かが説明できますか (そこに入力フィールドが必要なため)。

4

3 に答える 3

6 
visibility: hidden;

要素を非表示にしますが、「まだそこにあります」、

display:none;

要素の流れからそれを取り除き、他の要素には影響しません。

于 2013-09-27T19:48:45.183 に答える
2

CSS で入力要素に幅を追加すると、正常に動作します。

 input {
        visibility: hidden ;
        width: 50px;
        display:inline;
    }
于 2013-09-27T19:50:13.520 に答える
2

display: none;を設定することで、css を使用してフィールドを削除できます。. これで問題は解決します。

input {
   display: none;
}
于 2013-09-27T19:49:28.000 に答える