div块转到Firefox中的下一行

Question

I have a div with display:block in my css. This div block uses the align = "absmiddle" . It displays all the elements in 1 line in Chrome. However, in firefox, the elements are displyed on to the next line as well. How do I get them to display in 1 single line in firefox.

PS: I have already tried display: inline but it does not bring it in 1 line.

<div class="one"><input name="elementone" value="1" align="absmiddle" class="subone" /></div>

Css is

div.one,div.subone{
display:block; 
width:16px; 
height:100%;
background-position:0 0px;
border:0
}

Answer 1

I'm a little unclear on what you're trying to accomplish - centering input elements in a div?

All you need is a text-align: center on container div that holds all the inputs [.one is the class that should have center text alignment in the case of your example html].

Note there are some issues with your css

div.one,div.subone{ /*div.subone refers to a div with the class subone - not an input like you have*/
display:block; /*divs are already block elements */
width:16px;  /* may be the issue, why restrict the width? */
height:100%; /*basically meaningless */
background-position:0 0px; /*default*/
border:0
}

***Note: generally when you are trying to wrap a bunch of inline elements like inputs each inside their own div, there is another way to skin that cat. For instance, in this case if you have a number of divs with the class .one - they will show up on their own line because your css requires each div to display block.

Answer 2

I don't really understand your question but if you want multiple <div class="one"> in one line just float them left or right. However they will still jump to second line once the container div width is exceded. You could try and use a combination of white-space and overflow on the parent div.

But as I say - your problem is quite unclear from the question.