Постановка кнопок в столбец css
Подскажите, пожалуйста каким образом поставить кнопки в один столбец в css или html в asp.net mvc 
Отслеживать
задан 11 мая 2017 в 16:00
119 1 1 серебряный знак 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.1.9.3159
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как расположить блоки в столбик?
Все добрый день! Подскажите, обычное расположение блоков 
Необходимо расположить блоки так 
Есть какие способы что бы так реализовать?
- Вопрос задан более трёх лет назад
- 18379 просмотров
Комментировать
Решения вопроса 1
Дима Паутов @bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Если нужно что бы список сам так выстраивался, иначе я не вижу смысла задавать этот вопрос, то используйте css свойство columns. Гугл в помощь
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Строчно-блочные элементы
Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают случаи, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 3.28 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.
Рис. 3.28. Галерея фотографий
Если для формирования секций использовать тег , как блочный элемент он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задать цвет фона всей секции и установить её размеры. Наиболее популярное решение в подобных случаях это использование свойства float , которое будет рассмотрено в следующем разделе. Пока же остановлюсь на строчно-блочных элементах, которые сочетают преимущества строчных и блочных элементов.
В HTML нет тега, который относится к строчно-блочным элементам, его можно определить, задав элементу свойство display со значением inline-block .
Характеристики этих элементов следующие.
- Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
- Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
- Ширина равна содержимому плюс значения отступов, полей и границ.
- Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Можно выравнивать по вертикали с помощью свойства vertical-align .
- Разрешено задавать ширину и высоту.
- Эффект схлопывания отступов не действует.
Чтобы создать галерею, представленную на рис. 3.28 для тега следует задать значение display как inline-block , а внутрь него добавить изображение и подпись через тег
(пример 3.18).
Пример 3.18. Использование display
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Галерея 
Поскольку все фотографии имеют одинаковый размер, ширина блока задана явно и равна 150px, но высота не указывается, поэтому при длинной подписи к рисунку высота секций будет различаться (рис. 3.29).
Рис. 3.29. Разная высота секций
Это не является проблемой, поскольку в любом случае секции будут выводиться упорядоченно рядами, несмотря на разную высоту. При этом можно изменить вид выравнивания через vertical-align , добавив это свойство к классу photo . Если указать значение top , то поменяется отображение секций (рис. 3.30).
Рис. 3.30. Выравнивание по верхнему краю
Основной проблемой выступает браузер IE до версии 7.0 включительно. Этот браузер применяет значение inline-block только для строчных элементов и с блочными элементами работает некорректно. Чтобы убедить этот браузер правильно отображать наш пример, необходимо вместо inline-block использовать значение inline и установить свойство hasLayout . Добавление inline разрушит макет в остальных браузерах, поэтому правильным решением будет воспользоваться условными комментариями (пример 3.19).
Пример 3.19. Стиль для IE
