Question

I am making an application for an android phone using eclipse, I want to be able to have a label and a text field in one line or and a label and a checkbox in one line.
I have used the following codes for this purpose, but it doesnt work. you should also know that i am using jquery-mobile platform and I test the codes on an android phone.

SO any help would be appreciated!!

<p class="label_field_pair">
  <label for="foo">Foo:</label>
  <input type="text" id="foo" />
</p>

and the following css:

p.label_field_pair {

  clear: both;

  float: none;

}

p.label_field_pair label {

  clear: left;

  display: block;

  float: left;

  text-align: right;

  width: 100px;

}

p.label_field_pair input {

  clear: right;

  float: left;

  margin-left: 10px;

  width: 200px;

}

Answer 1

Try to avoid floats when you can. The implementation of inline-block is pretty good among browsers, especially if you include the -moz hack for older versions of FF. However, I don’t know if it behaves in your mobile browser… Does it?

HTML

<p class="label_field_pair">
  <label for='foo'>Foo: </label>
  <input type="text" id="foo" />
</p>

CSS

p.label_field_pair { display:block; }
p.label_field_pair label { display: -moz-inline-block; display:inline-block; width:100px; }
p.label_field_pair  input { display: -moz-inline-block; display:inline-block; width:200px; }