Как сделать кнопку внутри поля для поиска?
Разместить кнопку отправки формы внутри рамки для ввода текста.
Решение
Надо понимать, что напрямую добавить кнопку внутрь поля формы нельзя. Поэтому любые методы лишь имитируют этот эффект. Для создания подобной иллюзии следует убрать исходную рамку вокруг поля для поиска и добавить её к элементу, внутри которого располагается поле и кнопка. Данный метод лучше всего работает когда все размеры у нас имеют фиксированные значения. В примере 1 общая ширина формы задана как 300 пикселов, поле имеет ширину 274 пиксела, а кнопка — 20 пикселов. Ширина поля подобрана с учётом того, чтобы не возникало переносов в форме, это негативно скажется на общем виде.
Некоторых добавлений в код CSS потребуют браузеры Safari и Chrome. При получении фокуса поля формы подсвечиваются цветной рамкой, которая разрушает нашу иллюзию единого поля. Чтобы этого не возникало, в стиле поля для поиска добавим outline со значением none , это позволит заблокировать появление рамки в указанных браузерах. Вокруг поля поиска ( ) в любом случае останется тонкая рамка, её можно удалить с помощью специфического свойства -webkit-appearance опять же со значением none .
Пример 1. Форма поиска
HTML5 CSS 2.1 IE Cr Op Sa Fx
Форма для поиска Результат примера показан на рис. 1.
Рис. 1. Вид поля для поиска с кнопкой
Саму кнопку можно добавить по разному. Например, сделать её обычной кнопкой с надписью, через , или, как в примере выше, в виде кнопки с фоновым рисунком.
Как сделать два input в одну строку?
Есть два input. Как сделать так, чтобы они располагались на одной строке?
- Вопрос задан более трёх лет назад
- 18044 просмотра
2 комментария
Простой 2 комментария
yanis_kondakov @yanis_kondakov
Для ответа на вопрос покажите ваш код в песочнице, как вы сделали и что у вас не получается.
Модератор @TosterModerator
Дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.
Как a одну строку вставить кнопки?
Здравствуйте. Подскажите пожалуйста как выровнять в одну строку все кнопки соц сетей. Не могу понять где ошибка.
Сам код:
Стили:
В итоге последняя кнопка съезжает на строчку вниз. А должны быть в один ряд и от центрованы.
Подскажите пожалуйста, очень нужно красоту навести.
Ссылка на комментарий
Поделиться на других сайтах
Больше способов поделиться.
4 ответа на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Социальные кнопки в одну строку
У всех социальных сетей есть свои собственные кнопки, которые позволяют быстро поделиться новостью на друзьями или просто для того, чтобы показать свой интерес к прочитанному. Не все кнопки похожи, но благо то, что на многих популярных соц. сетях есть настройки для таких кнопок. Выбрав для всех одинаковую высоту, Вы сможете поместить кнопки в одну строку. Конечно, Вы можете использовать оригинальные иконки социальных сетей, по нажатию на которые будут открываться окна для отправки ссылки в профиль. Но предпочтительней использовать «родные» кнопки. Они, в основном, не открывают дополнительные окна, что ускоряет отправку ссылки. В социальных сетях ВКонтакте, Facebook, Twitter, Google Plus, Мой мир и Одноклассники есть возможность выбрать высоту 20 пикселей. Это компромисс. Ниже будет показана пошаговая инструкция, как создать свои кнопки, а пока посмотрите на специальный код, который позволит осуществить вывод кнопок соц. сетей в одну строчку.
Код HTML
Вместо названия сетей необходимо вставить полученные коды кнопок. Ниже читайте о том, как их получить.
Получить кнопку ВКонтакте
Кнопки в одну строку должны иметь одну и ту же высоту. Получить виджет можно здесь. Из вариантов следует выбрать «Кнопка с миниатюрным счётчиком». Высоту выбираем 20px. Копируем код, вставляем вместо названия «ВКонтакте» в коде выше.
Кнопка Твитнуть
Перейдите на страницу получения кнопочки. Тут она сразу имеет нужный нам формат. Копируем код, вставляем в нужное место.
Facebook Like
Получить код можно на соответствующей странице. Ширину нужно взять 200. Кнопку для отправки скрыть (снять галочку), вариант выбрать простой со счетчиком.
Google +1
Кнопку от Google Plus ставьте обязательно. Сгенерировать код можете здесь. Размер возьмите второй, и вариант со счетчиком.
Нравится и класс
Это последние кнопки в строке. Вот страница. Главное, оставьте размер второй. Текст на кнопках можно убрать вообще, это сэкономит место значительно.