CSS：为什么<input>对父div的宽度有影响

Question

请考虑以下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;
}

当我删除"input"元素时，"bc"

的宽度或多或少等于按钮，但是当它出现时，"bc"变得很大（宽度）。这是我的杰斯菲琴。有人可以解释为什么会这样以及我如何撤消这种效果（因为我需要那里的输入字段）？

Answer 1

visibility: hidden;

使您的元素不可见，但它"仍然存在"，

display:none;

从元素流中摆脱它，它不会影响任何其他元素。

Answer 2

在 CSS 中为您的输入元素添加了宽度，它工作正常。

 input {
        visibility: hidden ;
        width: 50px;
        display:inline;
    }

Answer 3

您可以使用 css 通过设置 display： none; 来删除字段。这将解决问题。

input {
   display: none;
}