Question

！[在此处输入图片说明] [1]我正在努力制作一个可以通过任何手机或标签轻松上手的网页。这里我有一个问题，在页面的导航按钮上，它自动创建空白。我没有在导航按钮上留下任何余量。您可以在左侧看到空白区域..这是我的HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Home</title>
<style>
body{background:#000}
.main_container{
    width:100%;
    height:100%;
    background:#ffcc00;
    font-family:"Century Gothic";
    overflow:auto;
    position:absolute;
    top:0;
    bottom:0
}
.header{width:100%; height:120px; background:#fff; position:fixed; z-index:500}
select {
   background: url(img/new_arrow.png) no-repeat right #ffcc00;
   color:#fff;
   width: 120px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: none;
   border-radius: 0;
   height: 34px;
   -webkit-appearance:none;
   -moz-appearance:none;
   outline:none;
    }

.search_box{width:90%; background:#fff; border:1px solid #ffcc00;  border-radius:5px; height:50px; float:left; }
input.text_box{width:80%; padding:15px 0 0 0; border:none; outline:none; margin-left:5px; float:left;}

.main_page{top:110px; width:100%; position:absolute; height:auto;}
ul.nav_buttons li{float:left; margin-right:20px; list-style:none; width:120px; text-align:center; color:#fff; font-size:12pt; font-weight:600;}
input.menu_buttons{width:100px; height:100px ;background:#fbd436; border:none; margin-top:15px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:2px solid #e1be31; outline:none; }
</style>
</head>
<body>
<div class="main_container">
    <div class="header">
        <div style="padding:5px 8px 5px 8px; float:left; width:90%;">
        <select>
        <option>Bangalore</option>
        <option>Chennai</option>
        <option>Delhi</option>
        <option>Kolkata</option>
        <option>Mumbai</option>
        <option>Pune</option>
        </select>
         </div>


         <div style="padding:5px 8px 5px 8px; float:left; width:100%">
            <div class="search_box">
                <input class="text_box" type="text" placeholder="e.g. schools, colleges" />
                <input type="button" style="width:50px; height:50px; background-color:transparent; border:none; background:url(img/search_icon.png) center no-repeat; cursor:pointer; outline:none; float:right"  />

            </div>
         </div>
    </div><!--header Ends-->

   <!--Main Page Start-->
   <div class="main_page">
        <div style="position:relative; margin:0 auto">
        <ul class="nav_buttons">
            <li><input style="background:#fbd436 url(img/playschool.png) no-repeat center;" class="menu_buttons" type="button" />Playchool</li>
            <li><input style="background:#fbd436 url(img/school.png) no-repeat center;" class="menu_buttons" type="button" />School</li>
            <li><input style="background:#fbd436 url(img/college.png) no-repeat center;" class="menu_buttons" type="button" />College</li>
            <li><input class="menu_buttons" type="button" />Coaching</li>
            <li><input class="menu_buttons" type="button" />Entarance Exam</li>
        </ul>
        </div>
   </div>
   <!--Main Page Ends-->
</div>
</body>
</html>

这是为移动设备制作网站的正确方法吗？

Answer 1

在webkit浏览器中，-webkit-padding-start在ul上默认为40px。你可以通过检查ul元素来看到这一点。您可以通过在ul上执行padding: 0来删除它来覆盖它。在firefox中，它是-moz-padding-start。

Answer 2

是的，这是制作响应式代码的好方法，您只需忘记左对齐：

.main_container{
width:100%;
height:100%;
background:#ffcc00;
font-family:"Century Gothic";
overflow:auto;
position:absolute;
top:0px;
left:0px;}

您seach_box左边的一些边距：

.search_box{width:90%; margin-left:4%;background:#fff; border:1px solid #ffcc00;  border-radius:5px; height:50px; float:left; }

DEMO：http://jsfiddle.net/4jr8s/2/

HTML左边距

2 个答案: