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

你可以写下面的代码：

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 2

你可以这样试试 -

.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 3

使用bootstrap类：

  <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

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

3 个答案: