Input по правому краю (без float:left)

[ekkl]

Со вчерашнего дня пытаюсь найти решение. Нужно кнопку придвинуть к правому краю формы(родителя) не прибегая ко float

Это возможно? Вот мои эксперименты.

для кнопки установлены такие спили (рамочку и т.д. упустил)

input[type="submit"] {  width: auto;  position: absolute;  right: 0px;} 

Для формы

form {  padding: 2em 3em 0em 4em;  position: relative;}

Кнопка позиционируется по правому краю контейнера, в котором находится форма.

Если кнопку поместить в контейнер

<span style="display:block;position:relative"><input type="submit"></span>

Все в порядке, но его высота = 0px и ревизор фаерфокса показывает, что она отображается за пределами формы, что вполне согласуется с абсолютной позицией.

Вот http://jsbin.com/gowela/11/edit

Возможно ли сдвинуть эту кнопку к правому краю не помещая её в другой контейнер? И естественно, чтобы она не выходила за границы формы.

—

ПС. эксперименты с её position:reative тоже ни к чему не привели.

Edited January 11, 2015 by ekkl

[Z1gnet]

ну к примеру text-align:right;

[ekkl]

Да. Это для контейнера, в котором размещена кнопка, но я ищу способ, чтобы указать это именно для input.

[psywalker]

Да. Это для контейнера, в котором размещена кнопка, но я ищу способ, чтобы указать это именно для input.

Т.е. как я понял, есть форма, внутри неё кнопка, которая 1) должна быть без контейнера 2) должна к правому краю прижиматься? Т.е. форма и кнопка и всё, так? Если да, то чем не угодил absolute или float?

[Yazon_Nile]

Display: block + margin: 0 0 0 auto + ширина

http://jsfiddle.net/gLmgmg6c/

Edited January 12, 2015 by Yazon_Nile

[ekkl]

Т.е. форма и кнопка и всё, так? Если да, то чем не угодил absolute или float?

Нет, еще текстовые поля и т.д.

Просто во всех формах хочу чтобы кнопка отправки располагалась по правому краю.

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

http://jsbin.com/gowela/12/edit

Ну вот что-то типа такого

form {  padding: 2em 3em 0em 4em;  position: relative;}input[type="submit"] {  width: auto;  position: absolute;  right: 0px;} 

[psywalker]

Ааа, ну всё ясно) Проблема в том, что вы задаёте элементу <form> правый padding, а absolute на этот padding не обращает внимание и проходит сквозь его. Как прописано в спецификации. Поэтому решений несколько:

 

1. Выставит кнопке right: (величина правого padding) + единица измерения (типа em, px и т.д., у вас 3em;)

2. Поместить весь контент/элементы и т.д. в форме в элемент <fieldset>, т.е. чтобы было так:

<form onsubmit="return false" action="http://some.ru"><fieldset>      <span class="icon user box">      <input type="email" name="email" placeholder="user">      </span>      <span class="icon pass box">      <input type="password" placeholder="password">      </span>      <span class="icon box">      <input type="password" placeholder="password">      </span>    <input type="submit">    </fieldset></form>

... и уже этому <fieldset> выставить position: relative;, а отступы оставить у самой <form>, как и сейчас.

 

Имхо, я бы выбрал именно второй вариант, он надёжнее и правильнее.

[ekkl]

Спасибо, кнопка передвинулась к правому краю формы, но все так же перекрывает второе поле password.

Для всех элементов задано display:inline-block;

[Great Rash]

А почему именно не прибегая к float? Чем он не угодил?

[ekkl]

Ну например, после него нужно будет добавлять clear:both; или что-то в этом роде

Ну и это же не блоковый элемент, чтобы его так позиционировать.

[Great Rash]

Ну например, после него нужно будет добавлять clear:both; или что-то в этом роде

Совсем необязательно.

 

Ну и это же не блоковый элемент, чтобы его так позиционировать.

Т.е. вы ради сомнительных причин готовы заниматься извращениями вместо того, чтобы быстро сделать как надо и забыть об этом?

[psywalker]

 

Ну например, после него нужно будет добавлять clear:both; или что-то в этом роде

Совсем необязательно.

 

 

 

Ну и это же не блоковый элемент, чтобы его так позиционировать.

Т.е. вы ради сомнительных причин готовы заниматься извращениями вместо того, чтобы быстро сделать как надо и забыть об этом?

 

+1