Как с помощью inline-block выровнять кнопку по правой стороне без флоатов?

Question

[igorstec]

вот пример моего кода
это то что я хочу

или все же в таких случаях нужно использовать флоат?

Answer 1

[Евгений Петров]

jsfiddle.net/petroveg/Lhr2p7o6/2
Нет, float тут не нужен.
Используем text-align-justify, ну а display:inline-block у вас уже стоит (у кнопки он всегда изначально такой).

Comments

[igorstec]

выдел такое, но не смог разобраться, может вы поможете? буду очень благодарен, мои вопросы в ссылке
jsfiddle.net/Lhr2p7o6/4

[Евгений Петров]

text-align: justify; /*эта штука ведь влияет на текст а не на блови кнопки и т.д.???*/

Если блок имеет display:inline-block, то он представляет собой символ, то бишь является частью строки.

width: 100%;/** мы этой штуке content: ""; задаем 100% ???? **/

Чтобы у нас образовалась символ в строке с максимальной шириной, иначе не сработает выравнивание по ширине.

text-align: left;/** эта штука ведь влияет на текст ???? не понимаю как это работает **/

text-align относится к числу наследуемых правил. Мы просто возвращает выравнивание текста положение по умолчанию.

[igorstec]

а не могли бы еще вот такой пример показать?
joxi.ru/i2UhVP3JTJAFTHmDkzw
jsfiddle.net/Lhr2p7o6/5

[igorstec]

вообще как-то очень сложно этот прием воспринимаю... может вы подскажите какие-то подробные источники информации?

[Евгений Петров]

jsfiddle.net/petroveg/Lhr2p7o6/6

[igorstec]

а без добавления этой кнопки в див никак? в этом и была суть вопроса )
просто в моем случае есть один див главный и внутри куча других дивов
joxi.ru/OWohVIwyTJC-ApE-mp8
красные точки это дивы отдельные...
а зеленым это я отметил вопрос - получается что бы все заработало мне нужно два дива засунуть в еще один див?

[Евгений Петров]

Суть вопроса была в отделении кнопки от блока с прижатием вправо.
Я не понимаю — вы показываете картинку с одной кнопкой, а код с двумя. Зачем вторая кнопка «Войти»? Где эта ситуация на макете?

[igorstec]

я немного запутал вас, извините.

в вашем примере идея в том что между каждым блоком мы ставим пустой символ в размер 100%... а я как бы попытался предположить что если у меня будет много блоков и поставить этот пустой символ в размер 100% мне нужно только между забранными, а не между каждым... тогда получается что мне все же эти два блока между которыми нужно поставить этот символ лучше объединить в один див?

[Евгений Петров]

Между каждым?)) Нет, конечно. Просто раздвинуть символы по ширине строки (text-align:justify) возможно, если только есть строка с максимальной шириной. Вот такую строку с помощью :after мы и поставили. В в первой строке все элементы с display:inline-block раскиданы по ширине контейнера.

А уже внутри этих блоков могут находиться наборы элементов с обычными расстояниями между собой.