Question

我有两个问题，但我会将它们描述为一个，因为我认为它们是相关的。这是我的代码（这与正在查看的大小+ 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;
}

Answer 1

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

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

1 个答案: