CSS - выравнивание с плавающей точкой

Question

Я все еще довольно зеленый в CSS, имея следующий CSS / HTML:

<input type="reset" value="Clear" style="float: right;" />
<input type="submit" value="Send" style="float: right;" />

Дает следующие результаты:

Вместо желаемого выхода:

Изменение порядка элементов HTML, похоже, решает проблему, но также нелогично.

Каково общее решение таких проблем?

Answer 1

они всплывают в том порядке, в котором они встречаются, первый элемент перемещается в крайнее правое положение, а затем следующий элемент перемещается сразу после него.

попробуйте вместо этого:

<div style="float: right;">
<input type="reset" value="Clear" style="float: left;" /> 
<input type="submit" value="Send" style="float: left;" /> 
</div>

Answer 2

Поместите их в контейнер div и поместите это правильно?

Answer 3

<div style="float:right;">
  <input type="reset" value="Clear" />
  <input type="submit" value="Send" />
</div>

Answer 4

Параметр "float" отправляет элемент вправо, насколько это возможно, до тех пор, пока не попадет в другой элемент с плавающей точкой.Следовательно, первая кнопка (Очистить) перемещается вправо, пока не достигнет поля поля, в котором она находится.Вторая кнопка пытается сделать то же самое, но уже остановлена ​​кнопкой очистки, поэтому останавливается слева от нее.

Это может быть не интуитивно понятно, поскольку элементы оказываются в обратном порядке, если вы перемещаете их вправо, но если вы перемещаете их влево, они оказываются в том же порядке, что и при перемещении их.Следовательно, вместо того, чтобы думать слева направо о том, как float будет выстраиваться в зависимости от порядка в коде, вы должны думать снаружи внутрь.

Answer 5

Насколько я знаю, при работе с плавающими элементами важен порядок, в котором элементы появляются в документе (или, точнее, в том, в котором они анализируются).Сначала размещается первый элемент, затем следующий, а затем ...