Html 引导标签和输入未水平对齐
在表单内联类中处理引导标签和输入时,我发现了一个有趣的问题。标签的调整似乎略高于输入值。 我只是使用基本的razor html帮助程序来生成这些输入和用于搜索的锚定标记Html 引导标签和输入未水平对齐,html,css,twitter-bootstrap,razor,Html,Css,Twitter Bootstrap,Razor,在表单内联类中处理引导标签和输入时,我发现了一个有趣的问题。标签的调整似乎略高于输入值。 我只是使用基本的razor html帮助程序来生成这些输入和用于搜索的锚定标记 <div class="form-inline"> @Html.LabelFor(x => x.StartDate, "From:", new { @class = "form-control input-sm" }) @Html.TextBoxFor(x => x.StartDate,
<div class="form-inline">
@Html.LabelFor(x => x.StartDate, "From:", new { @class = "form-control input-sm" })
@Html.TextBoxFor(x => x.StartDate, "MM-DD-YYYY", new { @class = "form-control input-sm", @id = "start-date" })
@Html.LabelFor(x => x.EndDate, "To:", new { @class = "form-control input-sm" })
@Html.TextBoxFor(x => x.EndDate, "MM-DD-YYYY", new { @class = "form-control input-sm", @id = "end-date" })
<a id="searchBtn" class="btn btn-primary">Search</a>
@LabelFor(x=>x.StartDate,“From:”,新的{@class=“formcontrolinput sm”})
@Html.TextBoxFor(x=>x.StartDate,“MM-DD-YYYY”,新的{@class=“表单控制输入sm”,@id=“开始日期”})
@LabelFor(x=>x.EndDate,“To:”,新的{@class=“form control input sm”})
@Html.TextBoxFor(x=>x.EndDate,“MM-DD-YYYY”,新的{@class=“表单控制输入sm”,@id=“结束日期”})
搜寻
愿意提出解决此内联表单组的新解决方案。但对我来说,这看起来既烦人又令人不快:(添加一些自定义样式,而不使用引导的默认样式。请检查以下示例:
<form>
<label for="email">Email address:</label>
<input type="email" class="xinput" id="email">
<label for="pwd">Password:</label>
<input type="password" class="xinput" id="pwd">
<button type="submit" class="xsubmit">Submit</button>
</form>
label{border: 1px solid #ccc;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;}
.xinput{height: 34px;
border: 1px solid #ccc;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;}
.xsubmit{height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555; border: none; outline: none; background-color: #008cba; color: white;}