Question

我有以下代码：

    <div class="filter-field">
        <span class="filter-title">Number From</span>
        <span class="filter-control">
            <dx:ASPxTextBox ID="FilterNumberFrom" runat="server" />
        </span>
        <span class="filter-extension">To</span>
        <span class="filter-control">
            <dx:ASPxTextBox ID="FilterNumberTo" runat="server" />
        </span>
    </div>

和这个样式表：

    .filter-field {
        height: 20px;
        display: inline;
    }

    .filter-title {
        width:90px;
        display: inline;
        padding-right:10px;
    }

    .filter-extension {
        width: 40px;
        display: inline;
        padding-left: 10px;
        padding-right: 10px;
    }

    .filter-control {
        display: inline;
    }

但每个范围都显示在一个新行上：

编号来自

文本框

要

文本框

什么时候应该是

来自 [空格]的数字 TextBox [更多空格] 到 [空格] TextBox

如何在不更改我正在使用的标签的情况下通过css实现此目的？（实际上是：不使用表格。）

Answer 1

您已经内联显示的内容，您有一些其他 CSS（具有更具体的选择器），可以创建block类型的显示。或者......文本框（无论呈现的版本是什么样的）都是display: block;自己。

Answer 2

将文本包装在块级元素中，例如段落或标题：

<div class="filter-field">
    <p>
      <span class="filter-title">Number From</span>
      <span class="filter-control">
        <dx:ASPxTextBox ID="FilterNumberFrom" runat="server" />
      </span>
      <span class="filter-extension">To</span>
      <span class="filter-control">
        <dx:ASPxTextBox ID="FilterNumberTo" runat="server" />
      </span>
    </p>
</div>

如果你的样式是跨越的，那么你的样式不需要设置为内联，所以你的CSS会变成：

.filter-field {
    height: 20px;
}

.filter-title {
    width:90px;
    padding-right:10px;
}

.filter-extension {
    width: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

.filter-control {

}

在最糟糕的情况下，您可能会将display: inline;声明替换为float: left;，但我不明白为什么您需要。

如果您仍然遇到问题，我建议您的span样式可能会继承CSS中其他位置的display: block;属性。

Answer 3

这些自定义ASP文本框几乎可以肯定地在<div>内呈现文本框。将此添加到CSS应该可以解决问题：

.filter-control * { display:inline !important;}

如果该文本框控件接受CssClass属性，您也可以尝试

.inline { display:inline; }

<dx:ASPxTextBox ID="FilterNumberXXXXXX" runat="server" CssClass="inline" />

Answer 4

使用firebug检查要对元素应用的规则。正如Nick建议的那样，可能有一个更具体的选择器为默认情况下应该内联的跨度添加display：block样式。

如果存在特定规则（基于ID），您可以通过以下方式使规则更具体：

向您的div添加ID并使您的css规则适用于该ID
查找应用的规则，引用哪个ID，并将CSS规则应用于该ID：

#the_id .filter-field span { display: inline; }

Answer 5

尝试

.filter-field {
    height: 20px;
    display:block;
    overflow:hidden;
}

Answer 6

问题可能是你实际上并不是要显示一个方框（div）而是一个段落（p）。您可以执行以下操作，它应该可以正常工作。

在你的风格中：

 .filter-field span{
     padding-right:10px;
 }

在你的标记中：

<p class="filter-field">
    <span class="filter-title">Number From</span>
    <span class="filter-control">
        Hello
    </span>
    <span class="filter-extension">To</span>
    <span class="filter-control">
        Goodbye
    </span>
</p>

还要记住CSS继承规则，因此问题可能在其他地方。使用Firebug或任何其他浏览器检查工具可能有助于确定发生了什么。

CSS显示内联的多个span / textbox

6 个答案: