Question

我在标题上有一个徽标和搜索栏。徽标位于左侧角落。我希望搜索栏位于标题的中心。我在导航菜单中尝试了一半。这是一个粗略的jsfiddle

#header  {
    position:relative; 
    float:left; 
    clear:both; 
    width:100%; 
    height:110px; 
    background:url("resources/images/logo.jpg") repeat-y; 
    font-size:30px;
    background:#ccc;
    }

#header img {
    position:relative; 
    left:20px; 
    top:13px; 
    border:0;
}

#header-search {
    position:relative; 
    left:220px; 
}

Answer 1

试试这个

将float同时用于#header img＆amp; #header-search margin以及其他#header { position:relative; float:left; clear:both; width:100%; height:110px; background:url("resources/images/logo.jpg") repeat-y; font-size:30px; background:#ccc; } #header img { position:relative; left:20px; top:13px; border:0; float: left; } #header-search { position:relative; float: left; margin-left: 40px; margin-top: 30px; }来自定义间距。

{{1}}

JSFiddle

Answer 2

我建议您遵循css float的概念。我根据自己的理解更新了你的小提琴。看看吧。

FIDDLE：http://jsfiddle.net/kiranvarthi/yaqxpm8e/4/

#header .logo {
    float: left;
}

#header-search {
    float: left;
    margin: 30px;
}

Answer 3

使用浮点数和内联块

的组合可以实现无幻数管理

＆＃13;

#header {
    position:relative;
    float:left;
    width: 100%;
    height:110px;
    background:url("resources/images/logo.jpg") repeat-y;
    font-size:30px;
    background:#ccc;
    text-align: center;
}
#header a {
    float: left;
    margin: 13px;    
    /* doesn't quite calculate (110-85)/2 = 12.5 */
}
#header-search {
    display: inline-block;
    margin-top: 35px; /* (110-40)/2 = 35px */
    height: 30px;
}

＆＃13;

<div id="header"> <a href="login.html"><img  src="http://lorempixel.com/output/abstract-q-c-200-85-4.jpg" 
    		width="200" height="85" /></a> 
    <div id="header-search">
        <form id="searchForm" action="searchproduct.json">Product Name:
            <input type="text" name="productName" value="${product.productName}" id="productName" />
            <input type="submit" value="Search" />
        </form>
    </div>
</div>

＆＃13;

注意 - 此方法会相应地保持居中的div，直到标题太窄而无法支持它。然后你需要媒体查询。

JSFiddle Demo

在标题上定位搜索栏

3 个答案: