Place two controls in a same line using CSS HTML

Question

I want to place two controls in a same line:

1)Textbox: ID = "hhmm" 2)Dropdown: ID = "morning"

You can see the code below.

<td>
     <dx:ASPxTextBox ID="hhmm" runat="server" DisplayFormatString="HH:nn"  Visible="True" CssClass="form-control form-control-lg" Width="100px">
          <ValidationSettings>
               <RegularExpression ValidationExpression="(0?\d|1\d|2[0-3])\:[0-5]\d" />    
          </ValidationSettings>
          <MaskSettings Mask="00:00" PromptChar="_" /> 
     </dx:ASPxTextBox>   
     
     <asp:DropDownList ID="morning" runat="server">
          <asp:ListItem Selected="True">AM</asp:ListItem>
          <asp:ListItem>PM</asp:ListItem>
     </asp:DropDownList>
</td>

Here is my bootstrap CSS:

.form-control-lg {
     min-height: calc(1.5em + 1rem + 2px);
     padding: 0.5rem 1rem;
     font-size: 1.25rem;
     border-radius: 0.3rem;
}

.form-control {
     display: block;
     width: 100%;
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: #212529;
     background-color: #fff;
     background-clip: padding-box;
     border: 2px solid #d5d5d5;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border-radius: 0.25rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Can anyone please fix this? Thanks!

score 0 · Accepted Answer · answered Jun 18 '21 at 05:03

There are many ways to let items sit next to eachother in CSS. An easy way that works for most HTML elements, and is implemented in every browser is display: inline-block;. If you put a CSS class on asp:DropDownList, for example:

<asp:DropDownList ID="morning" runat="server" CssClass="dropdown">

And add display: inline-block; to both of your CSS classes (at the same time removing display: block from .form-control):

.form-control {
  display: inline-block;
}
.dropdown {
  display: inline-block;
}

They will be rendered next to each other. A good way to get started on CSS is this CSS Basics website.

Place two controls in a same line using CSS HTML

1 Answers1