并排两个控件 CSS

Question

I want to Place two dx:ASPxDateEdit side by side as From Date and To Date How can i achieve

    <td>Issues Date:</td>
     <td>
      <dx:ASPxDateEdit ID="deFromDate" runat="server" Width="100px" AllowUserInput="False" Height="25px"
                    EditFormatString="dd-MMM-yyyy" DisplayFormatString="dd-MMM-yyyy" EditFormat="Custom"
                    Theme="Office2003Blue" ClientInstanceName="deFromDate" OnInit="deFromDate_Init">
      </dx:ASPxDateEdit>
<dx:ASPxDateEdit ID="deToDate" runat="server" Width="100px" AllowUserInput="False" Height="25px"
                    EditFormatString="dd-MMM-yyyy" DisplayFormatString="dd-MMM-yyyy" EditFormat="Custom"
                    Theme="Office2003Blue" ClientInstanceName="deFromDate" OnInit="deFromDate_Init">
      </dx:ASPxDateEdit>

Answer 1

You can add custom css to the datepickers with a class name like this to both of them:

Added css Class in

 <dx:ASPxDateEdit CssClass="date" 

For Both dx:ASPxDateEdit and Added bellow style and its working as expected

.datepicker{
display:inline-block;
}

or

 <style>
    .date {
        float: left;
        width: 50%;
    }
</style>

Answer 2

Give <dx:ASPxDateEdit> a class of .date

<dx:ASPxDateEdit
      class="date"
        ID="deToDate"
        runat="server"
        Width="100px"
        AllowUserInput="False"
        Height="25px"
        EditFormatString="dd-MMM-yyyy"
        DisplayFormatString="dd-MMM-yyyy"
        EditFormat="Custom"
        Theme="Office2003Blue"
        ClientInstanceName="deFromDate"
        OnInit="deFromDate_Init"
      >
      </dx:ASPxDateEdit>

and then give your class the property display:inline

 .date {
        display: inline;
      }

OR if you want to show it on separate lines.

 .date {
        display: block;
      }