html - Bulma CSS - 输入字段和选择元素之间的宽度不一致
问题描述
我需要使用 Bulma 框架创建表单,但在创建布局时偶然发现输入/选择字段之间的宽度存在一些差异。
如您所见,输入字段(1,插入名称)和选择元素(2,LAbelos)之间存在差异,所以我的问题是如何修复选择的宽度以匹配上面输入字段的宽度(1,插入名称)
这是代码:
<br />
<div class="columns">
<div class="column is-4">
<div class="columns is-desktop">
<div class="column is-3">
<p>
<label>
Awesome labelsss
</label>
</p>
</div>
<div class="column is-7">
<div class="field">
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
</div>
<div>
<br />
<div class="columns is-desktop">
<div class="column is-3">
<p>
<label>
Some text
</label>
</p>
</div>
<div class="column is-7">
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<p class="control">
<input class="input" type="text" data-precision="5">
</p>
</div>
<div class="field is-narrow">
<p class="control is-expanded">
<span class="select is-fullwidth" style="width: 79px !important;">
<select id="Unit" name="unitID" style="height: 36px !important;">
<option>Select dropdown</option>
<option>With options</option>
</select>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="columns is-desktop">
<div class="column is-3">
<p>
<label>
date ee
</label>
</p>
</div>
<div class="column is-7">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="dateLinked" type="date" id="LinkDate" data-range="-100:+2">
<span class="icon is-small is-right" style="cursor: pointer;">
<i class="icon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
<div class="columns is-desktop">
<div class="column is-3">
<p>
<label>
date ss
</label>
</p>
</div>
<div class="column is-7">
<div class="field">
<div class="control ">
<input class="input" id="UnlinkDate" type="date" data-range="-100:+2">
<span class="icon is-small is-right" style="cursor: pointer;">
<i class="icon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
<div class="columns is-desktop">
<div class="column is-3">
<p>
<label>
Insert name
</label>
</p>
</div>
<div class="column is-7">
<div class="field">
<div class="control">
<input class="input" id="Name" name="name" type="text">
</div>
</div>
</div>
</div>
<div class="columns is-desktop">
<div class="column is-3">
<p>
<label>
LAbelos
</label>
</p>
</div>
<div class="column is-7">
<div class="field">
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
</div>
<div class="columns is-desktop">
<div class="column is-3">
<p>
Another 1 text
</p>
</div>
<div class="column is-7">
<div class="field">
<div class="control">
<input class="input numeric" id="TableNumber" name="tableNumber" type="text">
</div>
</div>
</div>
</div>
<div class="columns is-desktop">
<div class="column is-3">
<p>
<label>
Another select
</label>
</p>
</div>
<div class="column is-7">
<div class="field">
<div class="select">
<select>
<option>-</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
</div>
<div class="columns is-desktop">
<div class="column is-3">
<p>
<label>
Some tekxt
</label>
</p>
</div>
<div class="column is-7">
<div class="field">
<div class="select">
<select>
<option>-</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
</div>
<div class="columns is-desktop">
<div class="column is-3">
<p>
<label>
Some number
</label>
</p>
</div>
<div class="column is-7">
<div class="field">
<div class="control">
<input class="input" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="column is-8">
<div class="somebackground"></div>
</div>
</div>
这是小提琴:
解决方案
推荐阅读
- angular - 复杂对象未完全在 api 调用中传递(Angular + net core 3)
- php - 在 Stripe PHP 上捕获特定错误以显示自定义消息
- php - Laravel 迁移数据库关系似乎是正确的。错误信息说外键不兼容
- botframework - 在不丢失实体映射的情况下刷新调度模型
- django - Django serializer with a filed that has a OneToOne relationship
- kubernetes - 每次部署只运行一次初始化容器
- python-3.x - 如何读取目录中的文件并写入文件
- css - 在 cinnamon.css 中编辑元素的属性
- android - 无法从 CalendarView 解析令牌“AbstractCalendarViewDelegate”
- javascript - 重新启动应用程序后调用 AccessToken.getCurrentAccessToken() 时获取 null