CSS display multiple span/textboxes inline - html

Question

I have the following code:
<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>
and this stylesheet:
.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;
}
but each span is displayed on a new line like this:
Number From
TextBox
To
TextBox
when it's supposed to be something like
Number From [space] TextBox [more
spaces] To [space] TextBox
How can I achieve this through css without changing the tags I'm using? (actually read: without using tables.)

Answer 1

What you have displays inline already, you have some other CSS (that has a more specific selector) creating the block type display. Or...the textboxes (whatever the rendered version looks like) are display: block; themselves.

Answer 2

Those custom ASP textboxes are almost certainly rendering the textbox within a <div>. Adding this to your CSS should do the trick:
.filter-control * { display:inline !important;}
If that textbox control accepts the CssClass attribute, you could also try
.inline { display:inline; }
<dx:ASPxTextBox ID="FilterNumberXXXXXX" runat="server" CssClass="inline" />

Answer 3

Wrap your text in a block-level element such as a paragraph or heading:
<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>
Your styles shouldn't need to be set to inline if they're spans, so your CSS becomes:
.filter-field {
height: 20px;
}
.filter-title {
width:90px;
padding-right:10px;
}
.filter-extension {
width: 40px;
padding-left: 10px;
padding-right: 10px;
}
.filter-control {
}
At worst, you might replace your display: inline; declarations with float: left; but I don't see why you'd need to.
If you are still having problems, I would suggest your span styles are probably inheriting a display: block; property from elsewhere in your CSS.

Answer 4

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

Answer 5

The problem might be that you actually don't mean to display a box (div) but a paragraph (p). You can do the following and it should work.
In your styles:
.filter-field span{
padding-right:10px;
}
In your markup:
<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>
Also remember that CSS inherits rules, so the problem could be somewhere else. Using Firebug or any other browser inspection tool could de helpful to determine what's going on.

Answer 6

Use firebug to check which rules are being applied to your elements. As Nick suggested there is probably a more specific selector adding a display: block style to the spans that should be inline by default.
If there is a specific rule (based on an id) you can make your rules more specific by:
Adding an id to your div and making your css rules apply to that id
Finding the applied rule, to which ID it refers, and making your CSS rules apply to that ID:
#the_id .filter-field span {
display: inline;
}