Search code examples
asp.netcssalignment

dropdownlist and text arent on the same level

I have dropdownlist and text doesnt display on the same level. text is located upper and dropdownlist is located on lower.

here is my code

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

and here is the screenshot

enter image description here

Please help me fix this. I need to align them horizontally.

Solution

  • You can use the following css to display dropdownlist next to label.

    enter image description here

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