在 ASP.NET Web 表单上保持 DevExpress 控件内联

Question

我刚刚用 DevExpress 控件替换了一个小型 Web 项目中的 Telerik 控件，但现在，尽管我添加了内联显示 div 作为容器，但这些控件不再内联呈现。可能是什么导致了这种情况，我该怎么做才能使这些错误的控件恢复内联？

<div style="display: inline;">
    <label>
        Department:</label>
    <dx:ASPxComboBox ID="deptCombo" runat="server" AutoPostBack="false" ValueField="DeptId" TextField="DeptName" Width="250px" OnSelectedIndexChanged="deptCombo_SelectedIndexChanged">
    </dx:ASPxComboBox>
    <label>
        Production Date:</label>
    <dx:ASPxDateEdit ID="productionDatePicker" runat="server" DisplayFormatString="{0:dd/MM/yyyy}" EditFormat="Custom" EditFormatString="dd/MM/yyyy" 
        ondatechanged="productionDatePicker_DateChanged">
    </dx:ASPxDateEdit>
</div>

Answer 1

听起来 DevX 控件有一些您需要覆盖的 CSS。

对于初学者，我会尝试将 !important 标志添加到样式中：

<div style="display: inline !important;">

如果这不起作用，请切换回 RadControls。他们要优越得多:)

Answer 2

几乎所有 DevExpress 控件都呈现为表格。这种方法的主要优点是这种方法提供了良好的跨浏览器能力，因为当使用嵌套 div 时，可能很难在所有浏览器中同步它们的位置和大小。然而，使用表格可以让最终用户摆脱这个问题。

[CSS] 在您的 css 上添加此行

.DXControlsInline {display: inline-table;}

[ASPx] 在您想要内联的控件上添加 CssClass="DXControlsInline"

<dx:ASPxLabel ID="ckArboviralDiseaseChikungunyaOtherSpecify" runat="server"  CssClass="DXControlsInline" Text="Specify:"></dx:ASPxLabel>
<dx:ASPxTextBox ID="tbArboviralDiseaseChikungunyaOther" CssClass="DXControlsInline"  ClientInstanceName="tbArboviralDiseaseChikungunyaOther" runat="server" Width="350px"></dx:ASPxTextBox> 

来源： http://www.theedgesearch.com/2016/04/how-to-arrange-devexpress-controls.html

Answer 3

该任务与我们的控件没有直接关系，并且可以在没有控件的情况下以类似的方式实现。对于 ASPxTextBox，请使用以下规则为其定义一个 CssClass 属性：

<dx:ASPxTextBox ID="txt1" runat="server" Width="170px" CssClass="txtStyle"></dx:ASPxTextBox>

.txtStyle {
    display: inline-block;
}

我准备了一个小示例来演示它的工作原理。另请参阅 CSS 显示属性。

更新：

当为 ASPxTextBox 指定标题时，它会呈现为表格。这就是为什么建议的方法在这种情况下不起作用。要解决此问题，我建议您将每个文本框放置在 div 元素中，并为其设置“display”属性。