Question

我的网站上有一个垂直菜单，当我收缩网页时，我想要横向显示，我怎样才能实现这个目标？

我离开这里的网站：

如果有帮助的话，我正在使用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;
}

Answer 1

使用条件。在某个宽度，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;
}
}

Answer 2

你使用了max-width和max-height。

在这种情况下，您可以改进其处理方式，而不是小窗口中浏览器的宽度和最大宽度。

Answer 3

你在那里有一个div＃lateral，其宽度=“300px”，限制了整个侧边栏区域。所以，你只有很大的空间可以横向使用。

在你的li elems上设置display =“inline-block”，但你需要大幅度调整你的字体大小和边距等，以使它看起来不错。

Answer 4

使用media queries将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;
  }
}

菜单问题和显示尺寸

4 个答案: