Question

您可以在JSFiddle中看到search div居中对齐，如何将其对齐到顶部？

HTML：

<div id="wrapper">
    <div id="banner">
        <a href="#"><h1>Title</h2><br />
        <h2>Subtitle</h2></a>
        <div id="search">
            <label>Search</label>
            <input type="textbox"/>
            <input type="submit" />
            <img src="images/logo.png" alt="logo"/>
        </div>
</div>

CSS：

#wrapper{
    width:85%;
    margin:35px auto;
}

#banner{
    height:150px;
    padding:30px;
    padding-bottom:5px;
}
#search{
    float:right;
    display:inline;
    width:38%;
}

#banner h1, #banner h2{
margin:0;padding:0;color:#A2A2A2;display:inline;
}
#banner h1{
font-size:50px;
}
#banner h2{
font-size:35px;
}

Answer 1

您至少有两个选择。如果您想将搜索div向右浮动，请在html代码中将其向上移动。现在搜索div浮动到代码中之后的元素。（请注意，原始代码中有一个未闭合的div。）

See the Fiddle

<div id="wrapper"> <div id="banner"> <div id="search"> <label>Search</label> <input type="textbox"/> <input type="submit" /> <img src="images/logo.png" alt="logo"/> </div> <a class="" href="#"><h1>Title</h2><br /> <h2 class="">Subtitle</h2></a> </div> </div>

其他选项是让前面的元素（a和h2）浮动到搜索div的左侧，但这看起来不如搜索{{{ 1}}不在浏览器窗口的右边缘。

将div与容器顶部对齐

1 个答案: