Question

我正在尝试弄清楚如何将<h4>标记和<button>标记放在一起。

当前行为 - 现在它们位于我的图像下方，我希望它们处于水平位置。

所需行为 - 我希望<h4>与图片并排，scanf与()并排。

我尝试向右浮动并显示块，但元素仍然在图像下方和另一个。

Answer 1

默认情况下，浏览器通常会将标题元素显示为block。使用inline-block不要让它在自己的行中。

HTML

<h4>title</h4>
<button>button</button>

CSS

h4 {
  display: inline-block;
}

DEMO：http://codepen.io/anon/pen/bVPXOK

Answer 2

也许

<h4 style="display:inline-block;">
  heading
</h4>
<button> submit </button>

Answer 3

我看到你的代码盘真正的问题是你的按钮在正确的div之外，这就是为什么它没有在<h4>旁边对齐的原因。我编辑了代码（Updated Working Codepan） -

修改后的代码

<div class=" panel-body">
     <div class="row-fluid">
           <div class="row-fluid">
                <img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
                <h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
                <button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
           </div>
    </div>
</div>

而不是此（您之前的代码） -

<div class=" panel-body">
     <div class="row-fluid">
          <div class="row-fluid">
               <img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
               <h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
               </div>
           <button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
     </div>
</div>

要将图片旁边的<h4>和<Button>对齐，您必须更改自己的CSS并添加display: inline-block !important;这样的内容（Updated Codepan with image alignment） -

<强> CSS

/* Hotel Search Panel */
.hotel-img {
  display: inline-block !important;
  width: 250px;
}

Answer 4

您可以使用的另一个选项是＆＃34; float-right＆＃34;类。如果将按钮嵌套在h4中，可以这样完成：

<h4>Title<button class="float-right">My Button</button></h4>

希望有所帮助！

如何将<h3>和<button>元素并排放置

4 个答案: