bulma field class不会创建边距

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

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

• Quickfix使用overflow：hidden在表单/容器元素上。
• 清洁修复程序使用clearfix，请参阅What is a clearfix?
• 其他选项是使用flexbox而不是float元素，具体取决于您需要支持的浏览器。

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