HTML/CSSの位置私はこれを行うにしようとしています

Question

要素：

と私は次のようになります。

は、最も美しいもの。 私の質問は以下の通りです：

1. ロゴ、検索バー、メニュー、ボタン付きヘッダーがあります。どのようにそれらをすべてインラインで積み重ねることができますか？
2. 背景画像のdivに - 元のサイトの見出しのように見出しを配置するにはどうすればよいですか？

Answer 1

1）Navbar componentのドキュメントをご覧ください。アイテムが正しくインライン展開されている必要があります。 navbar-leftおよびnavbar-rightクラスを使用すると、アイテムをNavbar内に配置できます。

2）大きなセンターテキストは、navbarロゴと同じ位置から始まります。これはコンテナクラスのためです。 examplesを分析して、コンテナを正しく実装する方法を確認することをお勧めします。その後

、あなたはまだペーストビンポストへのあなたのStyles.cssをを追加苦労したり、より良いしている場合は、まだCodepenを作成する - これは誰かがより有用であることができるようになります。

Answer 2

1 float：left;またはフロート：右。 ？あなたは絶対のdivを作成し、後で内部の相対的なdiv要素を作成する必要があります...そしてあなたが決済を指定することができる要素は、右上の下に配位このfloat

2-のための位置は左のためにここにposition

Answer 3

私が言う見て..見てフロートは使用するのが良い習慣ではありません。あなたが本当に使用する選択肢がない限り。

しかし、私はそれをどのように見るかに基づいています。 これはflexを使用して達成できます。

ディスプレイを置く：あなたのメインディビジョンにフレキシブル あなたの他の要素と同じです。ディスプレイを使用してください：flex-grow

フレックスを使うのが有利です。あなたの問題を解決するだけでなく、それはあなたのサイトに反応します。

乾杯

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]