выравнивание строк, HTML, CSS JAVASCRIPT

Question

Я делаю приложение для телефона Android с помощью Eclipse, я хочу, чтобы в одной строке была метка и текстовое поле, а в одной строке - метка и флажок.Я использовал следующие коды для этой цели, но это не работает.Вы также должны знать, что я использую платформу jquery-mobile, и я тестирую коды на телефоне Android.

ТАК любая помощь будет оценена !!

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

и следующие 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

Старайтесь избегать поплавков, когда можете.Реализация inline-block довольно хороша в браузерах, особенно если вы включили взлом -moz для старых версий FF.Тем не менее, я не знаю, ведет ли он себя в вашем мобильном браузере ... Так ли это?

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; }