-1

当我尝试将手机转为横向模式时，我的网页出现了一些问题。如果它是纵向的，则网页显示正常，但如果我尝试切换，我的按钮会出现在横幅上方。

我在脚上有一个标题和按钮的横幅（但都在正文中，不同的 div）

这是我的代码：

<body>  
<div data-role="page" id="home"  >
<div data-role="content">   
    <h2 id="banner">WebPage</h2>
    <div class="main_menu">
        <ul data-inset="true" data-role="listview">
            <li data-theme = "a"><a href="#button1">Button 1</a></li>
            <li data-theme = "a"><a href="#button2">Button 2</a></li>
            <li data-theme = "a"><a href="#button3">Button 3</a></li>
            <li data-theme = "a"><a href="#button4">Button 4</a></li>
            <li data-theme = "a"><a href="#button5">Button 5</a></li>
        </ul>       
    </div> <!-- /main_menu -->
</div> <!-- /content -->
</div> <!-- /page -->
</body>

我的CSS：

h2#banner {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:transparent url(icons/banner1.png) no-repeat left 10px;
width:146px;
height:162px;
margin:-10px auto -150px auto;
text-indent:-9999px;
}

.main_menu{
position:fixed; 
width:93%; 
height:0px;  
bottom:250px;
}

/* Home page banner landscape */
.landscape h2#banner {
background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px;
width:333px;
height:290px;
margin:-10px auto -175px auto;
text-indent:-9999px;
}

我想在纵向和横向模式下保持横幅和按钮之间的距离相同，或者如果不可能，将横幅下方的按钮保持在横向但不重叠。

4

1 回答 1

1

您应该尝试媒体查询。设计网页时，它最适合移动设备。或者您应该将元素的边距、高度和宽度的所有内容都更改为 % 而不是 px。Meid 查询：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

于 2013-09-17T03:34:59.580 回答