首页新闻找找看学习计划

当div设置 position: fixed;之后,如何将嵌套的div设置 padding-bottom: ;

0
悬赏园豆:10 [待解决问题]

div设置 position: fixed;之后,嵌套的div设置 padding-bottom: 30px;时并不管用,该怎么做!!

 

 

<body>

<div id="top_nav">
    <div id="logo">
        <img src="images/logo.png">
    </div>
    <div id="nav">
        <a href="#">关于我们</a>&nbsp;&nbsp;/&nbsp;&nbsp;
        <a href="#">技术能力</a>&nbsp;&nbsp;/&nbsp;&nbsp;
        <a href="#">核心产品</a>&nbsp;&nbsp;/&nbsp;&nbsp;
        <a href="#">销售业绩</a>&nbsp;&nbsp;/&nbsp;&nbsp;
        <a href="#">网上订单</a>&nbsp;&nbsp;/&nbsp;&nbsp;
        <a href="#">联系我们</a>
    </div>
</div>

<div class="content">


</div>
</body>

 

body, div, a, img {
    font-family: "Arial";
    margin: 0;
    padding: 0;
}

#top_nav {
    background-color: #00B4CC;
    width: 100%;
    height: 85px;
    white-space: nowrap;
    position: fixed;
}

#logo {
    display: inline;
}

#nav {
    color: white;
    font-size: 18px;
    line-height: 130px;
    display: inline;
    white-space: nowrap;
    border: 1px solid red;
   padding-bottom: 30px; } #nav a { color: white; text-decoration: none; } .content { border: 1px solid red; height: 1000px; }
horse_leo的主页 horse_leo | 初学一级 | 园豆:17
提问于:2015-12-24 13:56
< >
分享
所有回答(5)
0

为#nav设置一个height试试

乐享程序员 | 园豆:930 (小虾三级) | 2015-12-24 14:22

不起作用!!!

支持(0) 反对(0) horse_leo | 园豆:17 (初学一级) | 2015-12-24 14:47
0

把#nav下的line-height改成父元素的高度

冬雪映春影 | 园豆:210 (菜鸟二级) | 2015-12-24 14:47

不起作用

支持(0) 反对(0) horse_leo | 园豆:17 (初学一级) | 2015-12-24 14:49

@horse_leo: 我把你的代码复制粘贴试过了,是可以的

支持(0) 反对(0) 冬雪映春影 | 园豆:210 (菜鸟二级) | 2015-12-24 15:58

@horse_leo: 只是不知道你还有什么其他元素的东西给继承

支持(0) 反对(0) 冬雪映春影 | 园豆:210 (菜鸟二级) | 2015-12-24 15:59
0

这个我看了一下,应该是你的相法不对,你padding-bottom是起作用的,但是,你的文字你看上去没有动,是因为你的padding-bottom是加在文字下面,文字上面没动,nav的位置也没变,但是nav变高了,但是因为高出的被外层父div挡住了,所以你没发觉。你应用把内部的两个div设置为float:left。然后通过margin-top来定垂直位置,通过margin-left来定两个(log和nav)的水平位置。

ensleep | 园豆:1391 (小虾三级) | 2015-12-24 15:40

如果我吧内部的两个div设置为float:left,那么就无法实现log和nav居中了

支持(0) 反对(0) horse_leo | 园豆:17 (初学一级) | 2015-12-24 16:30

@horse_leo: 怎么会呢?你把他们俩再放到一个DIV里面,这个DIV也设置float:left;然后再设置margin-left:auto;margin-right:auto;

就可以了啊。如果此时发现外层div高度没有了,可以强制设置外层div高度,也可以在刚刚那个DIV的后面另一个兄弟div,设置clear:both

支持(0) 反对(0) ensleep | 园豆:1391 (小虾三级) | 2015-12-24 16:35

@ensleep: 不行的,这样的话log和nav不能居中

<div class="header">
    <div class="logo_nav">
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <div class="nav">
            <a href="#">关于我们</a>&nbsp;&nbsp;/&nbsp;&nbsp;
            <a href="#">技术能力</a>&nbsp;&nbsp;/&nbsp;&nbsp;
            <a href="#">核心产品</a>&nbsp;&nbsp;/&nbsp;&nbsp;
            <a href="#">销售业绩</a>&nbsp;&nbsp;/&nbsp;&nbsp;
            <a href="#">网上订单</a>&nbsp;&nbsp;/&nbsp;&nbsp;
            <a href="#">联系我们</a>
        </div>
    </div>
</div>
.header {
    background-color: #00B4CC;
    width: 100%;
    height: 85px;
    white-space: nowrap;
    text-align: center;
    position: fixed;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.logo_nav {
    float: left;
    text-align: center;
    margin: 0 auto;
}

.logo {
    float: left;
    padding-right: 30px;
    display: inline;
}

.nav {
    float: left;
    padding-left: 30px;
    color: white;
    font-size: 18px;
    display: inline;
    white-space: nowrap;
    border: 1px solid red;
    line-height: 85px;
}

.nav a {
    color: white;
    text-decoration: none;
}
支持(0) 反对(0) horse_leo | 园豆:17 (初学一级) | 2015-12-24 17:17
0

写个相对定位一下

搁忆 | 园豆:600 (小虾三级) | 2015-12-24 17:46
0

1.#top_nav设定了固定高度height,子div#nav的底部实际上的确变高了,可是再怎么变也是没有效果的,你把父div#top_nav的height去掉试试

2.如果你只是想要#nav往上移动,把#nav的属性line-height和padding-bottom去掉,然后加入绝对定位position: absolute;left: 100px;top: 30px;修改后代码如下:

#nav {
    color: white;
    font-size: 18px;
    display: inline;
    white-space: nowrap;
    border: 1px solid red;
    position: absolute;
    left: 100px;
    top: 30px;
}
PacificMoon | 园豆:202 (菜鸟二级) | 2015-12-25 15:56

不好意思,您的这个方法还是不行,跟我的想法不一样。

我现在已经把log和nav这两个DIV放入了logo_nav这个DIV,我需要的是log和nav这两个DIV在同一行并且居中,我还需要调整nav这个DIV距离logo_nav这个DIV的上下的位置

支持(0) 反对(0) horse_leo | 园豆:17 (初学一级) | 2015-12-26 10:01

@horse_leo: 也不知道楼主你现在解决这个问题了没,其实我是在你没有加float:left的代码里改的,在不在同一行,居不居中,top和left是可以调的,当然你用float:left也是可以,但我觉得用相对定位比较合适,还有我想说的是你那俩属性line-height和padding-bottom写那里是不合理的,根本没必要那样去写

支持(0) 反对(0) PacificMoon | 园豆:202 (菜鸟二级) | 2015-12-28 14:21
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册