如何將徽標，導航和搜索欄放在一條線上？

Question

我有導航，徽標和搜索欄，我想把它放在我的標題圖片上方一行。 有人可以指導我如何做到這一點？

https://jsfiddle.net/80pdq9jk/4/

 <header> 
<div class="container"> 

     <div class="logo">logo</div> 


      <ul class="nav"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
       </ul> 

      <form id="searchbox" action=""> 
       <input id="search" type="text" placeholder="Type here"> 
        <input id="submit" type="submit" value="Search"> 
      </form> 
</div>  
     </header> 

Answer 1

會是什麼元素排隊是float屬性，我用你的代碼和林立的元素。

提示：不要確定容器的高度或背景顏色，你會經常使用這個選擇器，所以他必須有定位功能。

這裏的代碼[http://jsfiddle.net/furlanj1/kjh8brf1/][1]

Answer 2

我不明白你的問題，你想clearly.Did這樣？

CSS代碼：

header { 
    height: 830px; 
    background-color:lightpink;  
} 

.container { 
    height: 130px; 
    width: auto; 
    background-color: white; 
    margin: 0px auto; 
} 

.logo { 
    float: left; 
    height: 63px; 
    width: 220px; 
    background-color: black; 
    color: white; 
    text-align: center; 
    line-height: 45px; 
    font-family: bernier_shaderegular; 
    font-size: 60px; 

} 


.nav { 
    float: left; 
    list-style: none; 
    overflow: hidden; 

} 

.nav li { 
    display: inline-block; 
} 

Answer 3

難道這就是你要找的人？

CSS

http://jsfiddle.net/tdtopkoL/

div.header-wrapper-outer { 
    width: 100%; 
    height: 63px; 
    background: #ff0000; 
} 
div.logo, div.navigation-wrapper { 
    display: inline-block; 
} 
div.navigation-wrapper { 
    vertical-align: top; 
} 
form#search { 
    display:inline-block; 
} 
div.logo { 
    background-color: #222; 
    color: #fff; 
    height: 63px; 
    line-height:63px; 
    width: 200px; 
    font-size:60px; 
    text-align: center; 
} 
ul.nav li { 
    display: inline; 
    list-style:none; 
} 

HTML

<div class='header-wrapper-outer'> 
    <div clas='header-wrapper-inner'> 
     <div class='logo'>FM</div> 
     <div class='navigation-wrapper'> 
      <ul class='nav'> 
       <li><a href='#'>About</a> 
       </li> 
       <li><a href='#'>Collections</a> 
       </li> 
       <li><a href='#'>Sales</a> 
       </li> 
       <li><a href='#'>Contact</a> 
       </li> 
       <li> 
        <form id='search' name='search'> 
         <input type='text' name='q' placeholder='Search' /> 
        </form> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 4

我調整了利潤率左爲與導航鏈接線。認爲它看起來難看！

header { 
 
    height: 830px; 
 
    background-color: lightpink; 
 
} 
 
.container { 
 
    height: 130px; 
 
    width: auto; 
 
    background-color: white; 
 
    margin: 0px auto; 
 
} 
 
.logo { 
 
    display: block; 
 
    margin-left: 30px; 
 
    margin-top: -70px; 
 
    height: 63px; 
 
    width: 220px; 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    line-height: 45px; 
 
    font-family: bernier_shaderegular; 
 
    font-size: 60px; 
 
    position: absolute; 
 
} 
 
.nav { 
 
    display: inline-block; 
 
    list-style: none; 
 
    overflow: hidden; 
 
    vertical-align: top; 
 
} 
 
.nav li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
#searchbox { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    float: right; 
 
}

<header> 
 
    <div class="container"> 
 

 

 

 

 
    <ul class="nav"> 
 
     <li><a href="#">1</a> 
 
     </li> 
 
     <li><a href="#">2</a> 
 
     </li> 
 
     <li><a href="#">3</a> 
 
     </li> 
 
     <li><a href="#">4</a> 
 
     </li> 
 
    </ul> 
 

 
    <form id="searchbox" action=""> 
 
     <input id="search" type="text" placeholder="Type here"> 
 
     <input id="submit" type="submit" value="Search"> 
 
    </form> 
 
    </div> 
 
    <div class="logo">logo</div> 
 
</header>