html - bulma 字段类不会创建边距底部

Question

我有一个搜索输入，然后是一个像这样的 html 表：

<form action="/providers/search" method="get">
    <div class="field has-addons">
        <div class="control">
            <input class="input" name="q" type="text" placeholder="Search for every columns">
        </div>
        <div class="control">
            <button type="submit" class="button is-primary">Search</button>
        </div>
    </div>
</form>

<table class="table is-bordered is-striped is-narrow is-fullwidth" >
    <thead> 
        <tr>        
            <th>Name</th>
            <th>Website</th>
            <th>Login</th>
            <th>Password</th>
            <th>Email</th>
            <th>Description</th>
            <th></th>       
        </tr>   
    </thead>
    ...
</table>

问题是搜索输入直接堆叠在 html 表上，我认为 .field 类不会在输入和表之间创建边距。

这是我得到的：

有什么不对？

Answer 1

您是否可能在表单内的元素上使用浮点数？这可能是表单/容器元素没有正确高度的原因。

• Quickfix 正在使用溢出：隐藏在表单/容器元素上。
• 更清洁的修复正在使用 clearfix 请参阅什么是 clearfix？
• 其他选项是使用 flexbox 代替浮动元素，具体取决于您需要支持的浏览器。

如果我走错了方向，请提供您使用的 CSS。