CSS：标签/文本框无法正确显示内联

Question

我这个下拉列表：

@* 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;
}

如上所示：

我的问题：如何让两个元素并排显示，以便“政策组织：”的结束文本不会被剪裁。

到目前为止我尝试了什么：

display: inline-block;

Answer 1

你的代码是正确的，如果你想并排显示它，但你的文字太大了，为什么它在盒子下面。

尝试下面的代码

  <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

Answer 2

添加类＆＃39;控件form-inline＆＃39;到了div       这是引导控件的引导程序css类。

尝试这个

<div class="form-group controls form-inline ">
    <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>

Answer 3

您可以将标签向左浮动。这与大多数浏览器兼容：

label {
    width: 300px;
    float: left;
    text-align: right;
    margin-right: 6px;
    line-height: 30px;
}

我已将line-height: 30px;用于要对齐的行，margin-right用于分隔。此外，所有标签都将对齐。

您可以调整标签宽度，更改with:值。

见here。