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是最后一个，所以它应该超越显示：表单控件类的块。但是在浏览器中，标签位于下拉列表上方而不是旁边。我检查了开发人员工具f12，并且样式窗口显示inlineControl类覆盖了表单控件类，并且显示应该是内联块，因此在计算窗口中它也显示显示应该是内联块。控件的标记是：

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

是什么导致控件显示为块，如何让它们以内联方式显示？

Answer 1

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

Asp.Net下拉列表和标签未显示内联

1 个答案: