2017-12-31 103 views
0

私はフォントawesome icoのつぶやきのリストを持っています。スクリーンショットのように、アイコンの近くにテキストを配置する方法は?fontawesomeアイコンの近くにテキストを配置する方法は?

スクリーンショット: enter image description here

私は以下のhtmlを使用している場合は、私はアイコンの下にテキストを持っています。

<ul class="tweets-list text-left"> 
         <li> 
          <div class="icon"> 
           <i class="fa fa-twitter" aria-hidden="true"></i> 
          </div> 
          <div class="text"> 
           <p>Check Out Dtbaker's @Arduino Sales Notification #System 
            http://t.co/ WBFKIWHJ</p> 
           <span>3 days ago</span> 
          </div> 
         </li> 
        </ul> 
+0

は、なぜあなたはTRと1つのTDなどの画像のように、各行とテーブルを使用していけません別のtdとしてのテキスト。したがって、それらは正しく整列するでしょう – Kumar

+0

表示について:インライン/インラインブロックまたは浮動小数点? – StyleSh1t

+0

フレックスボックスを使用しています。 '.icon'と' .text'クラスの 'display:inline-block'ですか? – Belial

答えて

0

ベリアルこれはあなたの要求を行うための最も簡単な方法ですので、必要でない場合は、ウルのアイコンがあなたのテキストで正確な横方向にそろうので、ここであなたは、ULおよびLiを削除することができます。私はテーブルを使用したくない場合は私に教えて、私は別の解決策を見つけるでしょう。

<table> 
<tr> 
    <ul class="tweets-list text-left"> 
    <li> 
     <td> 
     <div class="icon"> 
      <i class="fa fa-twitter" aria-hidden="true"></i> 
     </div> 
     </td> 
     <td> 
     <div class="text"> 
      <p>Check Out Dtbaker's @Arduino Sales Notification #System 
      http://t.co/ WBFKIWHJ</p> 
      <span>3 days ago</span> 
     </div> 
     </td> 
    </li> 
    </ul> 
</tr> 
</table> 

EDIT 12/31

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row justify-content-md-center"> 
 
    <div class="col"> 
 
     <div class="icon"> 
 
     <img width="50" src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/512/Twitter-icon.png"/> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-auto"> 
 
     <div class="text"> 
 
     <p>Check Out Dtbaker's @Arduino Sales Notification #System 
 
      http://t.co/ WBFKIWHJ</p> 
 
     <span>3 days ago</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

jsfiddle :: https://jsfiddle.net/ufy6t9kd/

+0

助けていただきありがとうございますが、私はテーブルなしでそれを作る必要があります – Belial

+0

@Belial私の編集を確認してください。また、私はjsFiddleを追加して、出力をそこにチェックします。 – Kumar

+0

@Belial私は2番目のdivを自動調整しました。必要に応じて変更することができます。これをチェックして。 https://getbootstrap.com/docs/4.0/layout/grid/ – Kumar

関連する問題