0

我正在尝试将我的旧网站菜单更改为对移动设备友好，并且在小屏幕上如何显示“菜单元素”时遇到问题。

菜单由 3 个元素（左、中、右）组成，现在在小屏幕上，它们以相同的顺序垂直排列。

但我想知道css是否有可能让它们像这样的位置，中间保持它的位置，左右移动到它下面，还是需要更多的技巧。

如何实现？

http://img834.imageshack.us/img834/2203/menuse.jpg

编辑，添加了我曾经玩过的简化代码：

<div id="header">

                    <div id="Bholder">
                        <div id="AButton"></div>
                        <div id="HButton"></div>    
                        <div id="CButton"></div>    
                    </div>

                </div>

CSS

#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 750px;

}

#AButton{
float: left;
width: 250px;
height:100px;
background-color: red;
}

#CButton{
float: left;
width: 250px;
height:100px;
background-color: green;
}

#HButton{
float: left;
width: 250px;
height:100px;
background-color: yellow;

}

@media only screen and (max-width: 767px){
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 250px;

}
  }
4

1 回答 1

0

您可以尝试将左右元素浮动到右侧，将中间元素浮动到左侧。然后使包装元素的宽度与每个元素的大小相同，以使它们在视觉上“摇晃”。

但是，是的，代码有助于了解您是如何设置菜单的。

[编辑]

@media only screen and (max-width: 767px){
    #Bholder{
        margin-left: auto;
        margin-right: auto;
        max-width: 250px;
        position: relative;
    }
    #AButton {
       position: absolute;
       top: 100px;
       left: 0;
    }
    #HButton {
       position: absolute;
       top: 0px;
       left: 0px;
    }
    #CButton {
       position: absolute;
       top: 200px;
       left: 0;
    }
}

注意：我会把它放在<ul>with<li>而不是div's 中。我会#id为你的 CSS 使用 classes 而不是 's。

于 2013-01-14T19:33:42.710 回答