我这个下拉列表:
@* POLICY ORGANISATION *@
<div class="form-group">
<label for="diagnosticMode" class="control-label col-xs-2">Policy Organisation:</label>
<div class="col-xs-10">
<select id="DD1" name="PolicyOrganisation" class="btn btn-default">
<option value="-1">Select</option>
@foreach (var item in ViewBag.PolicyOrgs)
{
<option value="@item.Id">@item.Name</option>
}
</select>
</div>
</div>
正在设置样式的
select {
width: 300px !important;
border: 1px solid gray !important;
outline: medium none !important;
height: 30px !important;
vertical-align: top;
-webkit-appearance: none;
}
select::-ms-expand {
display: none;
}
label{
white-space: nowrap !important;
}
看起来像上面的:
我的问题:如何让这两个元素并排显示,这样“policy organization:”的结尾文本就不会被截断。
到目前为止我尝试了什么:
display: inline-block;
最佳答案
如果您想并排显示代码,您的代码是正确的,但您的文本太大,这就是为什么它位于方框下方的原因。
试试下面的代码
<div class="form-group">
<label for="diagnosticMode" class="control-label col-xs-3">Policy Organisation:</label>
<div class="col-xs-9">
<select id="DD1" name="PolicyOrganisation" class="btn btn-default">
<option value="-1">Select</option>
@foreach (var item in ViewBag.PolicyOrgs)
{
<option value="@item.Id">@item.Name</option>
}
</select>
</div>
</div>
我为文本和选择的 col-xs-9 做了 col-xs-3
检查演示 here
关于html - CSS : Label/Textbox not displaying inline correctly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25970705/