Как центрировать это меню списка, трансформируя его из вертикального в горизонтальный

ewfewfwe

Привет, ребята, Я пытаюсь центрировать это меню на более узких экранах, когда оно преобразуется из вертикального меню на более широких экранах, но оно прилипает слева.

Итак, как мне отцентрировать его?

 


<!DOCTYPE html>


<html>


<head>


<style>


.list {


position: fixed;


right: 0;


top: 8em;


padding: 0.6em 0.4em;


border: 0.07em solid #656565;


}


.list li {


cursor: pointer;


margin: 1em 0;


}


.list li:first-child { margin-top: 0; }


.list li:last-child { margin-bottom: 0; }


@media (max-width: 40em) {


.list {


position: static;


padding: 0.6em;


}


.list li {


display: inline-block;


text-align: center;


vertical-align: middle;


margin: 0 0.3em;


}


}


</style>


</head>


<body>


<ul class=list>


<li>B1</li>


<li>B2</li>


<li>B3</li>


</ul>


</body>


</html>

Код (разметка): Спасибо,

7ucky

Спасибо, Гэри, за юмор, Это не противоречит интуиции.

Я поместил это вокруг изображений.

На рабочем столе много места.

Я хочу сосредоточиться на изображении на мобильных устройствах.

Поэтому он должен идти либо вверх, либо вниз. Хотя я использую очень широкоэкранный монитор. Однако ваш код получил следующие сообщения с рабочего стола Chrome:

 


The value "device-width;" for key "width" is invalid, and has been ignored.


horizon.html:7 The value "device-height;" for key "height" is invalid, and has been ignored.


horizon.html:7 Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.

Код (разметка): Вы все еще предлагаете это? Моя целевая аудитория — в основном мобильные устройства и женщины, а также, возможно, iOS. Спасибо,

Александр Шевень

Я пропустил ваш следующий пост.

Я также пропустил, что вы переходите от вертикального списка на широких экранах к горизонтальному на узких экранах, что мне противоречило. Но поскольку свою непонятую версию я уже закодировал, вот она для вашего развлечения и назидания.

 


<!DOCTYPE HTML>


<html lang="en">


<head>


<meta charset="utf-8">


<meta content=


"ширина = ширина устройства; высота = высота устройства; начальный масштаб = 1"


name="viewport">


<title>


Test document


</title>


<style type="text/css">


/*<![CDATA[*/


body {


background-color: white;


color: black;


font: 100%/1.5 sans-serif;


margin: 0 1.5em;


padding: 0;}


p {


font-size: 1em;}


h2::before {


content: "Desktop\a0"}


ul#test {


list-type: none;


margin: 1.5em 0;


padding: 0;


text-align: center;}


#test li {


display: inline-block;


margin: 0 0.3em;}


@media (max-width: 40em) {


h2::before {


content: "Small Viewport\a0"}


ul#test {


display: block;}


#test li {


display: block;


margin: 1.5em 0


text-align: center;}}


/*]]>*/


</style>


</head>


<body>


<h1>


Test of responsive list


</h1>


<h2>


Test


</h2>


<ul id="test">


<li>B1</li>


<li>B2</li>


<li>B3</li>


</ul>


</body>


</html>

Код (разметка): Боже! Ненавижу, что когда я вставляю сюда, форматирование не сохраняется. Гэри

KeyVisual

Какой-нибудь совет? Избавьтесь от проклятой позиции: исправлено; нет ничего лучше, чем тратить пространство на экране, которое можно было бы лучше использовать для отображения контента.

Есть причина, по которой я использую user.css через стильный интерфейс, чтобы переопределить это на любом сайте, который я часто посещаю, который выполняет этот глупый, бесполезный и раздражающий трюк.

Кроме того, вместо того, чтобы использовать курсороинтер, вы говорите, что это меню? Поместите туда ПОЛНУЮ семантическую разметку (также известную как ANCHORS), и вы обнаружите, что стилизовать привязки более надежно, чем LI, особенно если вам нужна поддержка IE8/более ранних версий.

Просто установите LI на встроенный блок, а затем забудьте, что они вообще существуют - даже НЕ ПЫТАЙТЕСЬ тратить время, делая с ними что-нибудь еще.

Установите для привязок значение display

lock, чтобы они могли иметь вертикальный стиль, и все в порядке.

Помните, даже не ДУМАЙТЕ о стилизации, пока у вас не будет полной семантической разметки.

Да, и эта «ошибка»: некоторые системы проверки не любят точки с запятой в метаданных области просмотра — НЕ то, что валидатор HTML вообще должен смотреть на содержимое метатега — замените их на запятые, поскольку это «принято». " разделитель по спецификации, который не имеет никакого отношения к заявлению, что...

Похожие темы	Дата
Работа на фотостоках, как успехи?	19.10.2024, 18:10
Как отцепить Корел от виндовой папки с фонтами?	19.10.2024, 18:10
Нужна помощь по CSS	19.10.2024, 18:10
Пожалуйста, помогите мне (полный нуб)	19.10.2024, 18:10
Как лениво загружать домашнюю страницу Blogger	19.10.2024, 18:10
Идеи дизайна сайта (навигация/меню)	19.10.2024, 18:10
Как добавить фоновое изображение на домашнюю страницу моей темы WHMCS?	19.10.2024, 18:10
Сделать высоту всех коробок одинаковой	19.10.2024, 18:10
Excel в HTML-таблицу	19.10.2024, 18:10
Посоветуйте, пожалуйста	19.10.2024, 18:10

Как центрировать это меню списка, трансформируя его из вертикального в горизонтальный

ewfewfwe

7ucky

Александр Шевень

KeyVisual

I AM

Интересно