リストと段落をインラインで浮かべる方法は？

Question

私のリストをインラインで

のサインイン

と一緒に右揃えにしています。私はヘッダーのすべての部分がリンクであるので、タグのためのフロートを入れてみましたが、それは動作していません。誰でも私がロゴを左に置くのを助けることができる、最も右側のもの（サインインのためにちょうどフロート）のサインで右のリスト。私が得るすべてのお返事ありがとう、私は本当にそれを感謝します。

HTML：

<header> 
    <nav id="header-flex"> 

    <div> 
     <img src="logo.jpg" alt=logo width="30px" height="30px"> 
    </div> 

    <div> 
     <ul> 
     <li><a href="___">Shop</a></li> 
     <li><a href="___">Products</a></li> 
     <li><a href="___">FAQ</a></li> 
     <li><a href="___">Blog</a></li> 
     </ul> 
    </div> 

    <div> 
     <p><a href="___">Sign In</a></p> 
    </div> 

    </nav> 
</header> 

CSS：それはあなたのdivを与えることによって行うことができます

#header-flex { 
    display: flex; 
    position: fixed; 
    background: rgb(0,191,255); 
    height: 75px; 
    width: 100%; 

} 

header a { 
    display: inline-block; 
    float: right; 
} 

Answer 1

は幅だと割り当てる：このように、彼らに 'フロートは左'：

HTML ：

<div class="left"> 
     <img src="logo.jpg" alt="logo" width="30px" height="30px"> 
    </div> 

    <div class="mid"> 
     <ul> 
      <li><a href="___">Shop</a></li> 
      <li><a href="___">Products</a></li> 
      <li><a href="___">FAQ</a></li> 
      <li><a href="___">Blog</a></li> 
     </ul> 
    </div> 

    <div class="right"> 
     <p><a href="___">Sign In</a></p> 
    </div> 

</nav> 
</header> 

CSS：

#header-flex { 
    display: flex; 
    position: fixed; 
    background: rgb(0, 191, 255); 
    height: 75px; 
    width: 100%; 
} 

header a { 
    display: inline-block; 
    float: right; 
} 

.left, .mid, .right { 
    float: left; 
    width: 33%; 
} 

Answer 2

<div>は、IMGとULのためのdivを使用する必要がデフォルトでdisplay: block;を持っていません。

また、身体からデフォルトの8pxマージンを削除します。

body { 
    margin: 0; 
} 

NAVは、あなたはそれが全体の幅を取りたいので、display: block;を使用することをお勧めします。ヘッダA` `に、あなたが表示されます：

今、あなたはオフトピックfloat: left、float: right

body { 
 
    margin: 0; 
 
} 
 

 
#header-flex { 
 
    display: block; 
 
    position: fixed; 
 
    background: rgb(0, 191, 255); 
 
    height: 75px; 
 
    width: 100%; 
 
} 
 

 
img { 
 
    float: left; 
 
} 
 

 
#header-flex>ul { 
 
    float: left; 
 
    margin: 0; 
 
} 
 

 
.sign-in { 
 
    float: right; 
 
    margin: 25px; 
 
}

<header> 
 
    <nav id="header-flex"> 
 
    <img src="logo.jpg" alt=logo width="30px" height="30px"> 
 

 
    <ul> 
 
     <li><a href="___">Shop</a></li> 
 
     <li><a href="___">Products</a></li> 
 
     <li><a href="___">FAQ</a></li> 
 
     <li><a href="___">Blog</a></li> 
 
    </ul> 
 

 
    <div class="sign-in"> 
 
     <a href="___">Sign In</a> 
 
    </div> 
 

 
    </nav> 
 
</header>