Question

我无法让我的包装器div与页面的顶部齐平。我已将body margin / padding设置为零，并将包装器div的上边距设置为零，但没有成功。

CSS：

body {
    font-family: Helvetica, sans-serif;
    background-image:url('../images/bg1.jpg');
    padding:0px; 
    margin:0px;
}

#ratio{
    text-align: center;
}

div#nav {
    text-align: center;
    margin: 0;
}

#nav img{
    padding: 5px 40px 20px 40px;
}

#task_table{
    width: 775px;
    table-layout: fixed;
    text-align: left;
    font-size: 12px;
    border-collapse:collapse;
}

#task_table td{
    border-bottom: 1px solid black;
    padding-top: 10px;
    padding-bottom: 10px;
}

#task_table td:first-child{
    width: 220px;
    padding-left: 15px;
}

#task_table td:nth-child(2){
    width:70px;
    padding-left: 20px;
}

#task_table td:nth-child(3){
    padding-left: 25px;
}

#task_table td:nth-child(4){
    text-align:right;
    padding-right: 15px;
}

#wrapper {
    width: 775px;
    margin: 0 auto;
    background-color: #fff;
    margin-top:0px;
}

#datecaption {
    font-size: 10px;
    padding-left: 15px;
    padding-bottom: 5px;
}

#hourscaption {
    font-size: 10px;
    padding-left: 195px;
}

#taskcaption {
    font-size: 10px;
    padding-left: 30px;
}

#taskbar {
    background: #CCCCCC;
    padding: 15px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

#task_text {
    margin-left: 20px;
    width: 330px;
}

#hours_text {
    margin-left: 20px;
    width: 50px;
}

.delete, .successful, .unsuccessful {
    padding: 0px 4px 0px 4px;
}

HTML：

<body>

    <div id="wrapper">

        <div id="nav">

            <a href="index.php"><img src="images/tab1.jpg" class="navimg" id="tab1"/></a>

            <a href="completed.php"><img src="images/tab2.jpg" class="navimg" id="tab2"/></a>

            <a href="failed.php"><img src="images/tab3.jpg" class="navimg" id="tab3"/></a>

        </div>

        <span id="datecaption">DATE</span>

        <span id="hourscaption">HOURS</span>

        <span id="taskcaption">TASK</span>

            <form action="index.php" method="POST" style="margin:0;padding:0;" id="submit">

        <div id="taskbar">

                <select name="month" id="monthDD"><option>January</option><option selected="selected">February</option><option>March</option><option>April</option><option>May</option><option>June</option><option>July</option><option>August</option><option>September</option><option>October</option><option>November</option><option>December</option></select><select name="day" id="dayDD"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option selected="selected">14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option></select>                <select name="year" id="yearDD">

                    <option>2012</option>

                    <option>2013</option>

                    <option>2014</option>

                </select>



                <input type="text" name="hours" id="hours_text" />

                <input type="text" name="task" id="task_text" />

                <input type="Submit" value="Add Task" style="margin-left: 20px;" />

        </div></form>



        <table id="task_table"><tr id="row157"><td>February 14, 2012</td><td>0</td><td>Read</td><td><a href=""><img src="images/trash.png" class="delete" name="157"></a>

            <a href=""><img src="images/delete.png" class="failed" name="157"></a>

            <a href=""><img src="images/check.png" class="successful" name="157"></a></td></tr><tr id="row158"><td>February 14, 2012</td><td>1</td><td>Work on tasks project</td><td><a href=""><img src="images/trash.png" class="delete" name="158"></a>

            <a href=""><img src="images/delete.png" class="failed" name="158"></a>

            <a href=""><img src="images/check.png" class="successful" name="158"></a></td></tr></table>     



    </div>

</body>

任何人都知道怎么了？谢谢。

奇怪的是，似乎是在jsFiddle工作; http://jsfiddle.net/jsNS8/

Answer 1

我会使用position:absolute属性。

#wrapper
{
position:absolute;
top:0px
}

Answer 2

我认为CSS重置文件不是答案，因为你已经有效地重置了包含

的所有body元素

你是否在#nav元素的顶部有任何余量？这可能会与#wrapper重叠，从而导致页面顶部出现间隙。我倾向于使用填充代替这样的实例。

我希望这能为你解决它！

Answer 3

在放入css之前使用css重置文件，看看是否有帮助

Answer 4

尝试删除/调整元素：'#nav img'

此元素的填充影响父元素高度。

你能准确解释你打算做什么或出了什么问题。

不能让div与页面顶部齐平

4 个答案: