Question

I am trying to create three controls that are layed out horizontally. In an attempt to accomplish this, I’m currently trying the following:

<div data-role="controlgroup" data-type="horizontal">
  <input id="button1" type="button" value="<" />
  <span><input id="tally1" type="text" /></span>
  <input id="button2" type="button" value=">" />
</div>

This text input field seems to insert a line break before and after itself. If I remove the text field, everything lays out as expected. How do I get rid of the line break? If I can’t, how do I layout these three fields in a horizontal stack?

Thank you!

Answer 1

This should work:

#tally1 {
    display:inline;
}

Try changing display:inline; to display:inline !important; It may be that the text field is inheriting a display style from JQuery Mobile, you’d use !important to override it, but only as a last resort.