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

ewfewfwe · 12.05.24

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

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

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

Код:

<!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 · Вторник в 01:33

Спасибо, Гэри, за юмор,

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

Однако ваш код получил следующие сообщения с рабочего стола 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.

Спасибо,

Александр Шевень · Сегодня в 07:14

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

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

Код:

<!DOCTYPE HTML>
<html lang="en"> <head> <meta charset="utf-8"> <meta content= "ширина = ширина устройства; высота = высота устройства; начальный масштаб = 1" name="viewport"> <title> Test document </title> <style type="text/css">  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>

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

Гэри

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

ewfewfwe

7ucky

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

Поделиться страницей

О нашем форуме!

Новые пользователи

Что нового?