HTML /定位按钮和文本在同一行

Question

我的HTML代码中有两个元素。一，是一个文本：＆＃34;机器＆＃34;另一个是需要在右侧面板上的按钮（但是在理智的线条中......）。

   <div class="panel panel-default">
        <div class="panel-heading" style="align: center"> <strong class="">Machine</strong>
        <div ng-show="app[11]">
           <button style="float: right;" class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
        </div>
    </div>

出于某种原因，该按钮显示在文本下方，而不是旁边。

可能是什么原因？

修改

在答案建议之后我将其更改为下一个代码：

    <div class="panel panel-default">
        <div class="panel-heading" style="align: center;"> <strong class="">Machine</strong>
        <div style="float: right;" ng-show="app[11]">
    <button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
       </div>
         </div>

它仍然给我相同的结果：

我稍后关闭了第一个<div>。

Answer 1

您没有关闭第一个div。

<div class="panel panel-default"> <div class="panel-heading" style="align: center; float:right;"> <strong class="">Machine</strong> </div> <div style="float:right;" ng-show="app[11]"> <button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button> </div> </div>

现在您可以更改文本div的line-height，以便在按钮旁边有更好的位置。

Answer 2

不要漂浮任何东西。在panel-default display:inline-block; vertical-align:middle;内潜入两个div，它会将它们置于同一水平线上。

.panel-default{
  > *{ display:inline-block; vertical-align:middle; }
}

Answer 3

您可以将<button>及其周围的<div>放在<div class="panel-heading">内，并将float属性从<button>移至<div>，像这样：

<div class="panel panel-default">
    <div class="panel-heading" style="align: center;"> <strong class="">Machine</strong>
        <div style="float: right;" ng-show="app[11]">
           <button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
        </div>
    </div>
</div>

http://jsfiddle.net/n6tp90s7/

您的代码缺少一个结束</div>，因此我不确定这是否是您从一开始的意图。

Answer 4

<div id="box">Machine<div id="button">delete</div></div>

和css：

#box {width:200px; height:40px; line-height:40px; padding-left:5px;}

#button {width:70px; height:36px; float:right; margin:2px 5px; background:#ff0000;}

有了这个，你就可以得到你想要的结果。你可以添加你没有写的代码......