как прижать кнопку к правому краю
Input по правому краю (без float:left)
Спросил ekkl,
11 января 2015
Вопрос
Со вчерашнего дня пытаюсь найти решение. Нужно кнопку придвинуть к правому краю формы(родителя) не прибегая ко float
Это возможно? Вот мои эксперименты.
для кнопки установлены такие спили (рамочку и т.д. упустил)
Кнопка позиционируется по правому краю контейнера, в котором находится форма.
Если кнопку поместить в контейнер
Все в порядке, но его высота = 0px и ревизор фаерфокса показывает, что она отображается за пределами формы, что вполне согласуется с абсолютной позицией.
Возможно ли сдвинуть эту кнопку к правому краю не помещая её в другой контейнер? И естественно, чтобы она не выходила за границы формы.
ПС. эксперименты с её position:reative тоже ни к чему не привели.
Изменено 11 января 2015 пользователем ekkl
Ссылка на комментарий
Поделиться на других сайтах
11 ответов на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Добрый день. Нуждаюсь в помощи/совете!
В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить. игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так?
Сам сайт: http://2metra.com/
Вот код который я прописал:
Есть страница, c:
body <
max-width: 1200px;
margin: auto;
>
т.е. контент посередине.
footer <
position: fixed;
bottom: 0;
>
«привязывает» к низу, но растягивает по ширине экрана.
Всем привет! Я тут новичок, не пинайте сразу если что.
Требуется аналог position sticky для IE (в режиме совместимости с 7).
Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.
Позиционирование элементов
Нормальное позиционирование
Абсолютное позиционирование
Рис. 3.42. Значения свойств left, right, top и bottom при абсолютном позиционировании
Для режима характерны следующие особенности.
Пример 3.31. Создание аналога фреймов
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.43. Слой header выводится в потоке как обычно, а для слоёв sidebar и content установлено абсолютное позиционирование.
Рис. 3.43. Применение абсолютного позиционирования
Абсолютное позиционирование также применяется для создания различных эффектов, например, всплывающей подсказки к фотографиям. В отличие от атрибута title тега который также выводит текст подсказки, через стили можно управлять видом текста выводимого с помощью скрипта.
Пример 3.32. Стиль для всплывающей подсказки
Сам скрипт состоит из двух функций — moveTip() отслеживает движение мыши и в соответствии с координатами курсора меняет положение слоя, и toolTip() управляет видимостью слоя и выводит в нём желаемый текст (пример 3.33).
Пример 3.33. Скрипт для вывода слоя
Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега
‘ + ‘Объектив: Canon EF 24-105 f/4L IS USM
‘ + ‘Вспышка: Canon Speedlite 580 EX
‘ + ‘Выдержка: 1/125
Диафрагма: 5.6′)» onmouseout=»toolTip()» />
2.4. CSS-позиционирование
CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).
В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:
Схемы позиционирования
В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:
Нормальный поток
Обтекание
Абсолютное позиционирование
Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.
1. Содержащий блок
2. Выбор схемы позиционирования: свойство position
Свойство position определяет, какой из алгоритмов позиционирования используется для вычисления положения блока.
Свойство не наследуется.
Относительно позиционированный блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.
Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков.
Отступы margin абсолютно позиционированных блоков не схлопываются.
Содержимое абсолютно позиционированного элемента не может обтекать другие блоки. Абсолютно позиционированный блок могут скрывать содержимое другого блока (или сами могут быть скрыты), в зависимости от значения z-index перекрывающихся блоков.
«Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения.
«Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.
«Липкий» блок создает новый содержащий блок для абсолютно и относительно позиционированных потомков.
При печати фиксированные блоки повторяются на каждой странице, содержащим блоком для них устанавливается область страницы. Блоки с фиксированным положением, которые больше области страницы, обрезаются.
Рис. 1. Разница между статичным, относительным и абсолютным позиционированием
3. Смещение блока: свойства top, right, bottom, left
| top | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство top задает расстояние, на которое верхний край абсолютно позиционированного блока (с учетом его margin ) смещается ниже верхнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно верхнего края самого блока (то есть блоку задается позиция в нормальном потоке, а затем смещение от этой позиции в соответствии с этим свойством).
| right | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin ) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.
| bottom | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство bottom указывает расстояние, на которое нижний край блока смещен вверх относительно нижнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно нижнего края самого блока.
| left | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство left указывает расстояние, на которое левый край смещен вправо от левого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно левого края самого блока.
Положительные значения смещают элемент внутрь содержащего блока, а отрицательные — за его пределы.
4. Обтекание: свойство float
Обтекание позволяет блокам смещаться влево или вправо на текущей строке. «Плавающий блок» смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего блока. Если имеется линейный блок, внешняя верхняя часть плавающего блока выравнивается с верхней частью текущего линейного блока.
При использовании свойства float для элементов рекомендуется задавать ширину. Тем самым браузер создаст место для другого содержимого. Если для плавающего элемента недостаточно места по горизонтали, он будет смещаться вниз до тех пор, пока не уместится. При этом остальные элементы уровня блока будут его игнорировать, а элементы уровня строки будут смещаться вправо или влево, освобождая для него пространство и обтекая его.
Свойство не наследуется.
| float | |
|---|---|
| Значение: | |
| none | Отсутствие обтекания. Значение по умолчанию. |
| left | Элемент перемещается влево, содержимое обтекает плавающий блок по правому краю. |
| right | Элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю. |
| inherit | Наследует значение свойства от родительского элемента. |
Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются.
Рис. 2. Обтекание элементов
5. Управление потоком рядом с плавающими элементами: свойство clear
Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.
Свойство не наследуется.
| clear | |
|---|---|
| Значение: | |
| none | Означает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию. |
| left | Смещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе. |
| right | Смещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе. |
| both | Смещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе. |
| inherit | Наследует значение свойства от родительского элемента. |
Для предотвращения отображение фона или границ под плавающими элементами используется правило
6. Определение контекста наложения: свойство z-index
В CSS каждый блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально накладываются друг на друга.
Рис. 3. Положение элементов вдоль оси Z
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения. Каждый блок принадлежит одному контексту наложения. Каждый блок в данном контексте наложения имеет целочисленный уровень, который является его положением на оси Z относительно других блоков в том же контексте наложения.
Свойство z-index позволяет изменить порядок наложения позиционированных элементов в случае, когда они накладываются друг на друга.
Свойство не наследуется.
6.1. Контекст наложения
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:
html прижать к правому краю
Что мне нужно добавить, чтобы вставить кнопку в правую часть div в той же строке, что и заголовок?
Какие методы CSS можно использовать для этого? Спасибо.
Обычно я бы рекомендовал плавать, но из ваших 3 требований я бы предложил следующее:
Не забывайте position: relative; в родительском div
Это зависит от того, чего именно вы хотите достичь.
Если вы просто хотите, чтобы это было справа, я бы рекомендовал использовать абсолютную позицию, потому что он открывает целую банку червей по линии.
HTML также может быть изменен:
CSS тогда должен быть чем-то вроде:
Вы можете увидеть это в действии здесь: http://jsfiddle.net/azhH5/
Если вы можете изменить HTML, то он становится немного проще:
Вы можете увидеть это в действии: http://jsfiddle.net/8WA3k/1/
Если вы хотите, чтобы кнопка в той же строке, что и текст, вы можете добиться этого, выполнив следующие действия:
В следующем примере вам нужно будет отрегулировать край верхнего края для указанного размера шрифта
Как вы можете видеть, он не выскользнул из
Я только что увидел, что вы также хотите, чтобы он был немного от края справа. Это легко достижимо с помощью этого метода. Просто добавьте margin-right: 1em; в
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Разместить фотографию по правому краю окна браузера, чтобы близлежащий текст обтекал её с других сторон.
Решение
Пример 1. Изображение по правому краю
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Фотография, выровненная по правому краю
Имеется див, внутри которого несколько маленьких дивов. Нужно центрировать их по вертикали и прижать к правому краю.
Центрировать получилось с помощью display: flex; Как я могу теперь пижать их к правому краю? margin-left: auto; делает отступ между дивами, а мне нужно прижать их к правому краю без отступов между собой.
css правый край div1 прижать к правому краю div2
Есть div1, внутри него div2.
Как div2 правым краем с помощью css прижать правому краю div2.
Добавлено через 34 минуты
бррр.)))
text-align: right
в сво-вах css div1.
Прижать блок к правому краю
Начал изучать css и не получается сделать как хочу, помогите пожалуйста прижать синий блок к.
Прижать картинку к правому краю
Здравствуйте! В блоке содержится изображение и таблица. Таблица шире чем картинка и, соответственно.
Прижать кнопку к нижнему правому краю
Кнопка прижимается только к низу, но слева, в чем проблема? 11
Если я правильно понял суть, то нужно
Alorian’а первый вариант точно работает и точно правильный. а насчёт позиционирования флоатом никогда не слышал и не думал что работает.
З.Ы. модераторы, если что извините. потом удалите это сообщение)
xxxNEIxxx, У тебя мало постов недорос еще 🙂 Если я не ошибаюсь надо минимум 200 постов. Прочти в теме что админ создал там есть еще дискусия по поводу анимированных аватаров и т.д.
этот способ в резиновой вёрстке работает отлично! а насчёт флоата, по идеи ничего не должно произойти если в диве находиться только один див! если в диве находиться два дива то можно сделать один плавающим.
я в програмировании практически на нуле, но в вёрстке шарю достаточно хорошо 
З.Ы. 200 постов это всмысле репутации? ты меня наверн не правельно понял, я говрил за эту цытату у тебя: Опыт — это имя, которое каждый дает своим ошибкам.
Почитайте документацию, или поставьте эксперимент если документации не верите. На самом деле сталкивался пару раз с тем что в документации не правильно пишут, но этот не тот случай.
Добавлено через 14 минут
ппц, я же говорю, насчёт первого способа я уверен что работает отлично, потому что сам так делаю!
а насчёт флоата я знаю как с ним обращаться! но если в диве будет только ОДИН див и для него float: right, то я не уверен что он просто станет с правой стороны, потому что его ничто не будет обтекать! но я в этом не уверен, поэтому и не говорю ничего прямо за флоат.
З.Ы. твоя цытата с htmlbook говорит за обтекание но ничего не говорит за один елемент!