html - CSS：为什么有对父 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;
}

当我删除“输入”元素时，“bc”的宽度或多或少等于按钮，但是当它出现时，“bc”变得很大（宽度）。这是我的jsfiddle。有人可以解释为什么会这样以及如何撤消这种影响（因为我需要那里的输入字段）？

Answer 1

visibility: hidden;

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

display:none;

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

Answer 2

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

input {
   display: none;
}

Answer 3

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

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