Постановка кнопок в столбец css
Подскажите, пожалуйста каким образом поставить кнопки в один столбец в css или html в asp.net mvc 
Отслеживать
задан 11 мая 2017 в 16:00
119 2 2 серебряных знака 11 11 бронзовых знаков
ASP.NET MVC не имеет никакого отношения к вопросу.
11 мая 2017 в 16:13
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вот такое решение:
.bgr < display: inline-flex; flex-direction: column; margin-top: 10px; margin-left: 20px; >.button7
Registration Main Page Отслеживать
ответ дан 11 мая 2017 в 17:00
dmitryshishkin dmitryshishkin
1,294 8 8 серебряных знаков 27 27 бронзовых знаков
добавил ничего не изменилось
11 мая 2017 в 17:59
Покажите HTML и CSS.
11 мая 2017 в 18:02
кнопки растянуло по странице но уже столбец)
11 мая 2017 в 18:04
Добавьте родителю еще align-items: flex-start;
11 мая 2017 в 18:07
снесло текст ближе к левому углу и все кнопка осталась прежней, может показать код фона?
11 мая 2017 в 18:12
- html
- css
- mvc
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420
Как сделать кнопку внутри поля для поиска?
Разместить кнопку отправки формы внутри рамки для ввода текста.
Решение
Надо понимать, что напрямую добавить кнопку внутрь поля формы нельзя. Поэтому любые методы лишь имитируют этот эффект. Для создания подобной иллюзии следует убрать исходную рамку вокруг поля для поиска и добавить её к элементу, внутри которого располагается поле и кнопка. Данный метод лучше всего работает когда все размеры у нас имеют фиксированные значения. В примере 1 общая ширина формы задана как 300 пикселов, поле имеет ширину 274 пиксела, а кнопка — 20 пикселов. Ширина поля подобрана с учётом того, чтобы не возникало переносов в форме, это негативно скажется на общем виде.
Некоторых добавлений в код CSS потребуют браузеры Safari и Chrome. При получении фокуса поля формы подсвечиваются цветной рамкой, которая разрушает нашу иллюзию единого поля. Чтобы этого не возникало, в стиле поля для поиска добавим outline со значением none , это позволит заблокировать появление рамки в указанных браузерах. Вокруг поля поиска ( ) в любом случае останется тонкая рамка, её можно удалить с помощью специфического свойства -webkit-appearance опять же со значением none .
Пример 1. Форма поиска
HTML5 CSS 2.1 IE Cr Op Sa Fx
Форма для поиска Результат примера показан на рис. 1.
Рис. 1. Вид поля для поиска с кнопкой
Саму кнопку можно добавить по разному. Например, сделать её обычной кнопкой с надписью, через , или, как в примере выше, в виде кнопки с фоновым рисунком.
Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами — с помощью тега и тега .
Рассмотрим вначале добавление кнопки через и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Значение кнопки и одновременно надпись на ней. |
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
HTML5 IE Cr Op Sa Fx
Кнопка Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Второй способ создания кнопки основан на использовании тега . Он по своему действию напоминает результат, получаемый с помощью тега . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .
