HTML/CSS定位元素

Question

我試圖做到這一點：

和我看起來是這樣的：

不是最美麗的東西。 我的問題是：

1. 我們有一個標題，搜索欄，菜單和一個按鈕。我如何將它們全部內嵌？
2. 在與背景圖像的div - 我怎麼能像原始網站那樣定位標題？

Answer 1

1）看看Navbar component文檔。如果實施正確，項目應該已經內聯。您可以使用導航欄左側和導航欄右側的類來定位導航欄中的項目。

2）您會注意到大型中心文本始於與導航欄徽標相同的位置。這是因爲容器類。我建議你分析一下examples看看如何正確實現容器。

之後，如果您仍在努力將styles.css添加到您的pastebin文章或更好地創建Codepen - 這將允許某人更有幫助。

Answer 2

1-你可以寫float：left;或浮動：正確; ？尋找這個float

2的位置，你必須創建一個相對的div后里面建立絕對的div ..一個元素，你可以指定結算與右上底部座標左..看看這裏position

Answer 3

我要說浮動不是很好的練習用法。除非你真的沒有選擇使用。

但基於我如何看待它。 使用flex可以實現。

放一個顯示器：flex在你的主div上 然後至於你的其他元素。使用顯示器：flex-grow

使用flex是有利的。 ，不僅能解決你的問題。它使您的網站反應靈敏。

乾杯

Answer 4

[![if you need all navigation item in one line. you have to make display:inline-block,for navigation. 

change your code to: 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap"> 
       <ul class="pull-left"><li><a href="#" class="logo"></a></li> 
       </ul> 
       <ul class="pull-left">     
        <li class="formSearch"> 
         <input type="text" placeholder="Find Freelancers" id="searchButton"> 
        </li>    
        <li><a href="#">Browse</a></li> 
        <li><a href="#">How it works</a></li> 
       </ul> 
       <ul class="pull-right"> 
        <li> 
         <a href="#" class="signupHover"> 
          <span class="icon signup"></span> 
          <a href="#">Sign Up 
          </a> 
         </a> 
        </li> 
        <li> 
         <a href="#" class="loginHover"> 
          <span class="icon login"></span> 
          <a href="#">Login</a> 
         </a> 
        </li> 
       </ul> 
       <button type="button" id="buttonHeader">Become a freelancer</button> 
      </div> 

/*add below css*/ 

.nav-wrap ul li{display:inline-block;}][1]][1]