html - CSS : Label/Textbox not displaying inline correctly

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

看起来像上面的:

我的问题:如何让这两个元素并排显示，这样“policy organization:”的结尾文本就不会被截断。

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

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