css - 在标题上定位搜索栏

Question

我在标题上有一个 Logo 和搜索栏。 Logo 位于左上角。我想要标题中心的搜索栏。我试过它的一半隐藏在导航菜单中。这是一个粗略的 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

试试这个

对#header img 和#header-search 使用float 和额外的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; 
}

JSFiddle