Проблемы с меню и размеры дисплея

Question

Проблемы с меню и размеры дисплея

0

У меня есть вертикальное меню на моем веб-сайте, которое я хочу сделать горизонтальным, когда я сжимаю веб-страницу, как я могу это достичь?

я оставляю здесь сайт:

Ссылка

Я использую wordpress для создания этого веб-сайта, если это помогает

единственное, что есть в меню:

#menu_esquerda{
float: left;

}

#menu-o-menu{
list-style: none;
margin-top: 20px;
}

#menu-o-menu a{
color: white;
text-decoration: none;
font-family: Lato, Arial;
}

#menu-o-menu li{
padding-bottom: 10px;
}

Angus 28 апр. 2014, в 11:22

Источник

0

попробуйте использовать display: inline в браузере
4dgaurav 28 апр. 2014, в 08:27

Теги:

html

css

menu

4 ответа

0

У вас есть боковая сторона div #, ширина которой равна "300 пикселей", что ограничивает всю область боковой панели. Таким образом, у вас есть только такая возможность для горизонтальной работы.

установка display = "inline-block" на ваших li elems работает, но вам нужно будет резко настроить размер шрифта и поля и т.д., чтобы он выглядел красиво.

davidpm4 28 апр. 2014, в 06:23

0

ты можешь объяснить лучше? скрипка может быть?
Angus 28 апр. 2014, в 08:53

0

Используйте условные обозначения. При определенной ширине CSS изменит и преобразует меню в горизонтальное. Что-то вроде этого. Этот код никак не связан с вашим сайтом. Это зависит от вас!

@media screen and (min-width: 600px) {

#header ul {
    display: block;
    margin-right: 1.02048%; /* 10/980 */
}
#header form {
    display: none;
}
#footer p {
    display: block;
    line-height: 30px;
    color: #4e4e4e;
    text-align: left;
    float: left;
    width: 16.3265%; /* 160/980 */
    min-width: 120px;
    margin-left: 1.0204%; /* 10/980 */
}

}

@media screen and (min-width: 1000px) {

#header form {
    display: block;
}
#header ul a {
    display: block;
    float: left;
    width: 74px;
}

#header div > a.mobile {
    display: none;
}
}

ProfileTwist 28 апр. 2014, в 06:11

0

вы использовали максимальную ширину и максимальную высоту.

В такой ситуации вместо ширины и максимальной ширины в браузере в маленьком окне вы можете улучшить способ обработки.

Dr.Nyanpasu 28 апр. 2014, в 05:42

0

я не использовал максимальную ширину ...
Angus 28 апр. 2014, в 08:33
0

jsfiddle.net/WonSeokHan/9nH7b/3
Dr.Nyanpasu 28 апр. 2014, в 08:40

Ещё вопросы

попробуйте использовать display: inline в браузере
ты можешь объяснить лучше? скрипка может быть?
я не использовал максимальную ширину ...

James · Accepted Answer · 2014-04-28T08-07-00.000Z

Используйте медиа-запросы, чтобы настроить css на определенные устройства.

В вашем случае, если вы хотите, чтобы меню было горизонтальным, когда вы изменяете размер окна, а размер окна меньше, чем 980px, объявите стили, которые будут применяться для всех устройств с шириной ниже 980px в нижеследующей декларации

@media screen and (max-width: 980px) {
  // write the css here
}

Чтобы сделать горизонтальное меню, попробуйте это

@media screen and (max-width: 980px) {
  #lateral{
    float:none;
    width:100%;
  }
  #desc_fantas p{
     height:auto; // you have declared 100px height for this initially, i just changed it to reduce the height when the menu is horizontal. Change it as you need.
  }
  #menu-o-menu{
     text-align:center;
  }
  #menu-o-menu li{
     display:inline-block;
  }
}