次の 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です。これがなぜなのか、その効果を元に戻す方法を誰かが説明できますか (そこに入力フィールドが必要なため)。