我使用的是 Bulma 框架,如何将 Button 移动到与输入字段相同的行?看起来输入字段是全宽的
我的代码:
<div class="container">
<div class="field">
<div class="control has-icons-left has-icons-right">
<input type="text" class="input is-info is-large" placeholder="Input number in seconds">
<span class="icon is-medium is-left">
<i class="fa fa-futbol-o"></i>
</span>
</div>
</div>
<a class="button is-info">GO</a>
结果 Result image
最佳答案
http://bulma.io/documentation/form/general/#form-addons
如果你想要右边的按钮而不是 input 里面,
您可以使用 has-addons
类来“合并”控件(这里的输入和按钮),如下所示:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="field has-addons">
<div class="control has-icons-left">
<input type="text" class="input is-info is-large" placeholder="Input number in seconds">
<span class="icon is-medium is-left">
<i class="fa fa-futbol-o"></i>
</span>
</div>
<div class="control">
<a class="button is-info is-large">GO</a>
</div>
</div>
</div>
关于html - Bulma CSS - 输入字段中的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45884727/