如何讓圖像顯示在面板的左側（都在同一行）

爲什麼箭頭圖像會進入面板？我將箭頭圖像放入自己的列中，但它們正在與面板相交。當我給面板自己的列，然後圖像不會相交，但圖像和麪板之間的差距太大。如何讓箭頭圖像顯示在同一行的面板左側？如何讓圖像顯示在面板的左側（都在同一行）

<div class="row comment" id="1"> 
      <div class="col-xs-1"> 
        <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" name="up" class="img-responsive resize"> 
        <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" name="down" class="img-responsive resize"> 
      </div> 
      <div > 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         user 
        </div> 
        <div class="panel-body"> 
         text 
        </div> 
        <div class="panel-footer"> 
         <ul class="list-inline"> 
           <li><a class="reply" href="javascript:void(0)">reply</a></li> 
           <li><a class="expand" href="javascript:void(0)"> expand</a></li> 
            <li><a class="delete" href="javascript:void(0)"> delete</a></li> 
            <li><a class="edit" href="javascript:void(0)"> edit</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div>

CSS：

.comment{ 
    margin-left: 50px; 
} 

.resize{ 
    width:40px; 
    height: auto; 
}

這裏是一個fiddle。下面是我希望它看起來如何：fiddle 我不能使用此解決方案，因爲我需要整行有評論css規則，給它一個50px的左邊距，因爲我會有很多子註釋裏面的子註釋。

來源

2016-02-27 user3494047

這是如何應該看看嗎？ –

我們現在如何得到期望的輸出？ –

我更新了問題 – user3494047

您可以將網格1中的箭頭和剩餘網格中的其餘面板放在一起。這將在同一行中有箭頭和麪板。

.comment{ 
 
    margin-left: 50px; 
 
} 
 

 
.resize{ 
 
    width:40px; 
 
    height: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row comment" id="1"> 
 
      <div class="col-xs-1 arrows-block"> 
 
        <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" name="up" class="img-responsive resize"> 
 
        <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" name="down" class="img-responsive resize"> 
 
      </div> 
 
      <div class="col-xs-11" > 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading"> 
 
         user 
 
        </div> 
 
        <div class="panel-body"> 
 
         text 
 
        </div> 
 
        <div class="panel-footer"> 
 
         <ul class="list-inline"> 
 
           <li><a class="reply" href="javascript:void(0)">reply</a></li> 
 
           <li><a class="expand" href="javascript:void(0)"> expand</a></li> 
 
            <li><a class="delete" href="javascript:void(0)"> delete</a></li> 
 
            <li><a class="edit" href="javascript:void(0)"> edit</a></li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

來源

2016-02-27 17:42:09 Naga2Raja

如何讓圖像顯示在面板的左側（都在同一行）

回答

相關問題