Как сделать список вертикальным с помощью html css
спросил
Изменено 2 года, 3 месяца назад
Просмотрено 244 тысячи раз
У меня есть список, который я хочу добавить в
. Каждый элемент списка содержит
, которые, в свою очередь, содержат изображение и текстовую строку. Список должен быть вертикальным. я пробовал ставить display:block
для
- HTML
- CSS
Я бы добавил это в CSS 9 LI0005
.
элемент-списка { плыть налево; ясно: слева; }
1
Надеюсь, это ваша структура:
-
текст
-
текст
-
текст
По умолчанию будет добавлена одна за другой строка:
----- ----- -----
если вы хотите сделать его вертикальным, просто добавьте float слева к li, задайте ширину и высоту, убедитесь, что содержимое не выходит за пределы ширины:
| | | | | | ли { дисплей:блок; плыть налево; ширина: 300 пикселей; /* регулировать */ высота: 150 пикселей; /* регулировать */ отступ: 5px; /*регулировать*/ }
CSS
ли { отображение: встроенный блок; }
У меня тоже работает.Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
javascript — Как создать раздел контента рядом с вертикальным меню в HTML/CSS
спросил
Изменено 1 год, 7 месяцев назад
Просмотрено 512 раз
Я пытаюсь создать шаблон, поэтому мне нужен редактируемый регион div (красное поле) рядом с боковым меню (синее поле), чтобы поместить содержимое внутрь.
Я не могу понять, как, хотя. все, что я пробовал, либо скрывает меню, либо новый созданный мной div. Я действительно новичок в этом, я был бы признателен за любую помощь в достижении этого или дайте мне знать, если это вообще возможно. грубый набросок того, как я хочу, чтобы сайт выглядел
Это код бокового меню.
@charset "utf-8"; р, ул, ли, дел, нав { заполнение: 0; маржа: 0; } тело { семейство шрифтов: Calibri; } #меню { переполнение: авто; положение: родственник; z-индекс: 2; } .родительское меню { цвет фона: #0c8fff; минимальная ширина: 200 пикселей; плыть налево; } #меню ул { тип стиля списка: нет; } #меню уль ли { отступ: 10px 15px; дисплей: блок; цвет: #fff; текстовое оформление: нет; } #menu ul li a:hover { цвет фона: #007ee9; } #menu ul li: hover > ul { слева: 200 пикселей; -webkit-transition: осталось 200 мс для облегчения входа; -moz-transition: осталось 200 мс облегчение; -ms-transition: осталось 200 мс для облегчения входа; переход: осталось 200 мс облегчение; } #меню ул ли > ул { положение: абсолютное; цвет фона: #333; сверху: 0; слева: -200px; минимальная ширина: 200 пикселей; z-индекс: -1; высота: 100%; -webkit-transition: осталось 200 мс для облегчения входа; -moz-transition: осталось 200 мс облегчение; -ms-transition: осталось 200 мс для облегчения входа; переход: осталось 200 мс облегчение; } #menu ul li > ul li a: hover { цвет фона: #2e2e2e; }
<голова> <мета-кодировка="utf-8">
Документ без названия css" rel="stylesheet" type="text/css"> <тело>Вертикальное меню CSS3 с подменю
<навигация> <ул>-
- Дом и кухня <ул>
- элемент1
- элемент2
- элемент 3 с подменю <ул>
- элемент
- Ещё больше <ул>
- элемент
- элемент
- элемент
- элемент
- элемент
с width:100%
, но список течет слева направо по горизонтали. Как сделать список вертикальным?1
Попробуйте поместить display: block
в теги
- javascript
- html
- css
- side-menu
Что бы я сделал, так это создал третий div и присвоил ему класс или идентификатор (я просто назову его Green Box), а два других поместил div внутри третьего.