下拉列表和文本不在同一级别

Question

我有下拉列表，文字没有显示在同一级别上。 text位于upper，dropdownlist位于lower。

这是我的代码

<div style="display:inline;float:left">Ödeme Kalemi:</div>
   <div style="display:inline;float:left">
      <asp:DropDownList ID="DropDownList1" runat="server">
          <asp:ListItem>test</asp:ListItem>
          <asp:ListItem>test2</asp:ListItem>
      </asp:DropDownList>
   </div>
<div style="clear:both"></div>

这是截图

请帮我解决这个问题。我需要水平对齐它们。

Answer 1

您可以使用以下css显示标签旁边的下拉列表。

<style type="text/css">
    .row { clear: both; overflow: hidden; padding: 5px 0; width: 100%; }
    .row label { float: left; text-align: right; 
        margin-right: 10px; width: 150px; }
    .row .value { float: left; text-align: left; }
</style>

<div class="row">
    <label>Ödeme Kalemi:</label>
    <div class="value">
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>test</asp:ListItem>
            <asp:ListItem>test2</asp:ListItem>
        </asp:DropDownList>
    </div>
</div>