在引导面板内的同一行上对齐两个图像和标题

Question

我有一个引导面板，其中有两个图像以及我希望位于同一行的文本。 display:inline-block;和display:inline;没有像他们倾向于抢救。

<div class="panel panel-default"> 
     <div class="panel-heading"><b>Owner</b></div> 
     <div class="panel-body" id="owners"> 
      <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/40/405b7b5da64cc1dbcb68110ca5e65a9c751b79a0_full.jpg" height="64"><h4>Firav</h4> 
      <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/66/66cd4ded6f8bc2761f64c110ff8f8b93e568082e_full.jpg" height="64"><h4>Donnyy</h4> 
     </div> 
    </div> 
    <br> 

Answer 1

你可以尝试这样的 -

.panel-body figure{display:inline-block;}

<div class="panel panel-default"> 
 
     <div class="panel-heading"><b>Owner</b></div> 
 
     <div class="panel-body" id="owners"> 
 
     <figure> 
 
      <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/40/405b7b5da64cc1dbcb68110ca5e65a9c751b79a0_full.jpg" height="64"><h4>Firav</h4> 
 
     </figure> 
 
     <figure> 
 
      <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/66/66cd4ded6f8bc2761f64c110ff8f8b93e568082e_full.jpg" height="64"><h4>Donnyy</h4> 
 
     </figure> 
 
     </div> 
 
    </div>

Answer 2

你可以编写下面的代码：

HTML代码：

<div class="panel panel-default"> 
     <div class="panel-heading"><b>Owner</b></div> 
     <div class="panel-body" id="owners"> 
     <ul> <li><img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/40/405b7b5da64cc1dbcb68110ca5e65a9c751b79a0_full.jpg" height="64"> 
      <h4>Firav</h4></li> 
      <li><img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/66/66cd4ded6f8bc2761f64c110ff8f8b93e568082e_full.jpg" height="64"><h4>Donnyy</h4></li></ul> 
     </div> 
    </div> 

CSS代码：

#owners ul{list-style:none;margin:0;padding:0;} 
#owners li {float:left;margin:0 10px;} 
#owners li:first-child{margin-left:0;} 
#owners li:last-child{margin-left:0;} 

Answer 3

使用自举类：

<div class="panel panel-default"> 
    <div class="panel-heading text-center"> 
     <h3 class="panel-title"><b>Owner</b></h3> 
    </div> 
    <div class="panel-body" id="owners"> 
     <ul class="list-unstyled list-inline"> 
     <li class="text-center"> 
      <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/40/405b7b5da64cc1dbcb68110ca5e65a9c751b79a0_full.jpg" height="64"> 
      <h4>Firav</h4> 
     </li> 
     <li class="text-center"> 
      <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/66/66cd4ded6f8bc2761f64c110ff8f8b93e568082e_full.jpg" height="64"> 
      <h4>Donnyy</h4> 
     </li> 
     </ul> 
    </div> 
</div> 

jsfiddle