Div内容对齐 - 内容大于容器且位置错误

时间:2014-10-29 09:09:42

标签: html css

我有两个问题,但我会将它们描述为一个,因为我认为它们是相关的。这是我的代码(这与正在查看的大小+ 1200px有关):

http://jsfiddle.net/45Lbvejd/6/embedded/result/

问题1:包含搜索框(.b)的div不如其中的内容高。我应该是46px。我认为这与浮子有关。

问题2:搜索框应与右侧的按钮垂直对齐,但搜索框太低。我再次认为这与浮动有关。

这是我的标记:

<header>
    <div id="a" class="left"> <a href="#"><img src="#"></a>

    </div>
    <div id="b" class="left">
        <input id="keyword" class="testinput" placeholder="Keyword">
    </div>
    <div id="c" class="right"><a href="a.html" class="btnj">A</a>

    </div>
</header>
<div id="d">-</div>

Partical CSS:

/* Blocks */
 #a, #b, #c, #d {
    padding: 0px 15px;
}
/* Top Blocks */
 #a, #c {
    width: 100px;
    height: 46px;
    line-height: 46px;
    position: absolute;
}
#a img {
    height: 46px;
    width: 46px;
    display: block;
}
#b {
    width: 100%;
    margin-top: 60px;
    height: 46px;
    line-height: 46px;
}
#c {
    right: 0;
}
#d {
    width: 100%;
    position: absolute;
    top: 120px;
}
@media (min-width: 520px) {
    .testinput {
        width: 47%
    }
    #location {
        float: right;
    }
    #keyword {
        float: left;
    }
    #d {
        top: 120px;
    }
    .job .logo {
        display: inline-block;
    }
}
@media (min-width: 840px) {
    #b {
        margin-top:0;
        padding: 15px 100px;
    }
    .testinput {
        width: 320px;
    }
    #d {
        padding: 0px 100px;
    }
}
@media (min-width: 1200px) {
    #d {
        padding: 0px 165px;
    }
    #b {
        padding: 15px 165px;
    }
}
.left {
    float: left;
}
.right {
    float: right;
}

1 个答案:

答案 0 :(得分:1)

这是你想要的吗?的 jsFiddle demo 即可。很多padding-toppadding-bottom使用CSS应用于.b div,这就是为什么它被向下推,超出了46px的指定高度。我删除了所有填充,而是使用margin-top: 5px将搜索框与右侧的按钮垂直对齐。