Question

所以我有这个导航在移动和桌面上看起来都很好，因为它调整得很好并且相应地，但是我之后无法获得任何内容以便立即进行下面的操作。如果我没有设置像padding-top这样的东西，则导航设置在main_container上，正在导航栏下呈现，因此无法看到。

我会设置padding-top属性，但问题是，这将是一个移动和桌面网站。设置padding-top属性使移动中的页面呈现与桌面非常不同。它在移动设备中留下了比桌面更多的填充。

<div id="nav_cont">
    <ul id="nav">
    <?php
        $count=0;
        $count++;
        ?>
        <li><a href="index.php">Home</a></li>
    <?php
        $count++;?>
        <li><a href="register.php">Register a New Store</a></li>
    <?php 
        $count++;?>
        <li><a href="new_mvi.php">Add Movie/Series/Game Titles</a></li>
        <?php
        $count++;?>
        <li><a href="myorders.php">Orders</a></li>
        <?php
        $count++;
        ?>
        <li><a href="editmovies.php?id=<?php echo $storeid;?>">Edit Movie/Series/Game Titles</a></li>
    <?php
        $count++;?>
        <li><a href="login.php">Login to your Store</a></li>
    <?php
        $count++;?>
        <li><a href="cart.php">View Cart</a></li>
    <?php
        $count++;?>
        <li><a href="logout.php">Logout</a></li>
    <?php
        $width=100/($count);
    ?>
    </ul>
</div>
<style>

#nav li {
    display: table-cell;
    <?php echo "min-width: $width%; width: $width%; max-width: $width%";?>;
    border-right: 1px solid #ccc;
    text-align: center;
}
body {
    font-family: 'Ubuntu', serif;
    padding: 0px;
    margin: 0px;
}
#nav_cont{
}
#nav, #nav ul {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    float: left;
    margin: 0 0 2em 0;
    padding: 0;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc;
    display:table;
}
#nav li:first-child {
    border-left: 1px solid #ccc;
}

html, body {
    height: 100%;
    width: 100%;
    max-height: 100%;
    min-height: 100%;
}
body, div, table, tr, td, a {
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    border-collapse: collapse;
}
#page_container{
    margin: 0px;
    padding: 0px;
}
#main_container{
    margin: 0px;
}

<div id="main_container">
          <div id="page_container">
                 My Content here <!--This is being rendered under the navigation bar and hence not being seen-->

          </div>
</div>

你能指点我应该用来设置这个权利的CSS吗？

感谢。

Answer 1

因为你设置“position：absolute;”在id =“nav”的div上，你将它从正常的文档流中取出，实际上使得带有id =“main_container”的div成为文档流中的第一个元素，因此位于顶部。删除“position：absolute;”和main_container将位于nav。

之下

你也可以删除“top：0”，“left：0”和“float：left”，因为它们不会为你的布局做任何事情。

导航栏渲染主容器而非上方

1 个答案: