css - 文件上传css

Question

我很难弄清楚哪个 css 规则弄乱了文件上传表单元素，因为它与其他表单元素没有完全对齐。

http://jsfiddle.net/emRr2/

Answer 1

有一些相互冲突的风格。

此样式会覆盖自定义元素的宽度和填充：

form .section > div {
    [...]
    padding: 0 10px 0 1%;
    width: 75%;
}

在自定义字段周围添加 DIV 将固定宽度：

<div class="section _100">
    <label for="file">Image</label>
    <div> <!-- New DIV -->
        <div class="customfile">
            <button class="customfile-button" aria-hidden="true">Browse</button>
            <span class="customfile-feedback" aria-hidden="true">No file selected...</span>
            <input type="file" style="left: -53.4167px; top: 24.1667px; margin: 0px;" name="file" value="" class="required customfile-input">
        </div>
    </div> <!-- /New DIV -->
</div>

在我看来，您还应该删除以下内容，即偏移按钮并增加高度：

.customfile-button {
    margin-top:6px;
}