Question

我正在尝试将旧的网站菜单更改为适合移动设备，并且在“小屏幕”上显示“菜单元素”的方式存在问题。

菜单由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;

}
  }

Answer 1

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

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

[编辑]

@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>与<li>而不是div相结合。我会为您的CSS使用课程代替#id。

CSS响应式菜单元素定位

1 个答案: