リストの前に画像を見つける方法は？

Question

こんにちは私は5項目と少しの写真の妥協であるリストを持っています。私は "foto.png"をリストの前に置いて欲しい。

は、今では次のようになります -

私が何をしたいです：ここでは

は、以下の私のコードです： -

.headerbar { 
 
    \t text-align: right; 
 
    \t padding-top: 10px; 
 
    
 
    } 
 
    .profilephoto { 
 
    \t float: right; 
 
    \t margin: 0 auto; 
 
    } 
 
    .headerbar li { 
 
    \t color: white; 
 
    \t display: inline; 
 
    \t list-style: none; 
 
    \t margin: 7.5px; 
 
    \t font-weight: bold; 
 
    \t font-size: 18.5px; 
 
    \t font-family: "Dosis", Helvetica, sans-serif; 
 
    } 
 
    .headerbar li:last-child { 
 
    \t margin-right: 7.5px; 
 
    \t color: #ff5f5f; 
 
    }

<div class="headerbar"> 
 
     \t <div class="profilephoto"><img src="/img/foto.png" width="60"></div> 
 
     \t <ul> 
 
    \t \t \t <li><a href="#"> Profile</a></li> 
 
       <li><img src="/img/messages.png" width="18"> <a href="#">Messages</a></li> 
 
       <li><img src="/img/notification.png" width="18"> <a href="#">Notifications</a></li> 
 
      \t <li><a href="#">&#8226; &#8226; &#8226;</a></li> 
 
       <li><a href="#">QUIT</a></li> 
 
      </ul> 
 
     </div> 
 
     
 
    
 

Answer 1

あなたにfoto.pngを右に浮かべています...
フロート両​​方、.profilephotoおよびulからleftへの代わりに、right。

Answer 2

イメージをリストに置きます。

<div class="headerbar"> 
     <ul> 
      // picture added here 
      <li><img src="/img/foto.png" width="60"></li> 
      <li><a href="#"> Profile</a></li> 
      <li><img src="/img/messages.png" width="18"> <a href="#">Messages</a></li> 
      <li><img src="/img/notification.png" width="18"> <a href="#">Notifications</a></li> 
      <li><a href="#">&#8226; &#8226; &#8226;</a></li> 
      <li><a href="#">QUIT</a></li> 
     </ul> 
    </div> 

あなたは、このよう山車を使用する必要がありますし、prophilephotoのCSSクラスをOMMITすることができますいけません。

あなたはまだのように李にそれを適用することにより、マージンを追加することができます。

<li style="margin-left:20px;"><img src="/img/foto.png" ></li> 

またはLi

<li class="profilepic"><img src="/img/foto.png" ></li> 

にし、CSSのクラスを追加します。

.profilepic{ 
margin-left:20px; 
} 

Answer 3

私はちょうど次のことを変えることがトリックを行うべきだと思います。前 ：

.profilephoto { 
    float: right; 
    margin: 0 auto; 
} 

へ：

.profilephoto { 
    display: inline-block; 
    margin: 0 5px 0 0; 
} 

Answer 4

あなたは右の写真を浮遊しています！だから、にそれをフロートを左：

.profilephoto { 
    float: left; 
} 

Answer 5

が、この場合にフロートを使用しないでください、あなたはこの問題についてdisplay: inline-block;性質を持っています。

.profilephoto { 
    float: right; 
    margin: 0 auto; 
} 

これに：この

---

変更

.profilephoto { 
    display: inline-block; 
    vertical-align: middle; 
} 

例：

.headerbar { 
 
    text-align: right; 
 
    padding-top: 10px; 
 

 
} 
 
.profilephoto { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.headerbar li { 
 
    color: white; 
 
    display: inline; 
 
    list-style: none; 
 
    margin: 7.5px; 
 
    font-weight: bold; 
 
    font-size: 18.5px; 
 
    font-family: "Dosis", Helvetica, sans-serif; 
 
} 
 
.headerbar li:last-child { 
 
    margin-right: 7.5px; 
 
    color: #ff5f5f; 
 
}

<div class="headerbar"> 
 
     <ul> 
 
     <div class="profilephoto"><img src="/img/foto.png" width="60"></div> 
 
      <li> 
 
      <a href="#"> Profile</a></li> 
 
      <li><img src="/img/messages.png" width="18"> <a href="#">Messages</a></li> 
 
      <li><img src="/img/notification.png" width="18"> <a href="#">Notifications</a></li> 
 
      <li><a href="#">&#8226; &#8226; &#8226;</a></li> 
 
      <li><a href="#">QUIT</a></li> 
 
     </ul> 
 
    </div>

Fiddle example

Answer 6

私はあなたがお互いの近くに写真やリストを維持したいと？ .profilephotoをレベル要素inline-blockにしてリストをフロートさせて、デモを確認してください。https://jsfiddle.net/gkaraliunas/8b8hsnys/