css - Asp.Net 下拉列表和标签不显示内联

Question

我有一个带有 css 类的 asp.net 下拉列表，其标记是

  .form-control {
      display: block;
      width: 100%;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
              box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
              transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

我有一个标签，它应该与下拉菜单位于同一行，因此为了实现这一点，我添加了另一个 css 类:

.inlineControl {
    display: inline-block;
    vertical-align: middle;
}

下拉控件的 cssClass 属性中有两个类，inlineControl 是最后一个，因此它应该覆盖 display: 表单控件类的 block 。但是在浏览器中，标签位于下拉列表上方而不是旁边。我检查了开发人员工具 f12，样式窗口显示 inlineControl 类正在覆盖表单控制类，显示应该是内联 block ，因此在计算窗口中它也显示显示应该是内联 block . 控件的标记是:

<div>
   <label>לקוח</label>
   <asp:DropDownList ID="comboClients" runat="server" CssClass="form-control inlineControl" DataTextField="ClientName" DataValueField="ClientId">

是什么导致控件显示为 block ？如何让它们内联显示？

Answer 1

问题显然是宽度:100%。我将其更改为 90%，并且显示正常。