在 Div 中的基本 link 展示位置

Question

我有一个带有此标记的 div：

<div class="col-sm-12">
                <p class="bg-info">Basic Information</p>
</div>

看起来像：

我需要 link 'Add /Edit' 在 div 的右端，这样它看起来像：

尝试使用 link 向现有段落标签添加段落标签，但它会将新内容推送到下方。

我是 CSS 的新手，非常感谢您的帮助。

提前致谢。

此致。

Answer 1

<div class="col-sm-12">
    <p class="bg-info">Basic Information <a href="#" class="pull-right">Add /Edit</a></p>
</div>

Bootstrap Quick floats

我假设你正在使用 Bootstrap 因为你正在使用类。

Answer 2

试试这个：

<div id="container">
<div style="width:80%;float:left">
    Basic Information
</div>
<div style="width:20%;float:right">
    Add/Edit Rule
</div>    
</div>

Answer 3

<div class="col-sm-12">
<p class="bg-info pull-left">Basic Information</p>
<a class="pull-right">Add/Edit</a>
<div class="clearfix"></div>
</div>

Answer 4

<html>
  <head>
    <style>
      .bg-info {display: inline; float: left;}
      .bg-info2 {display: inline; float: right; color: red;}
    </style>
  </head>
  <body>
    <div class="col-sm-12">
                <p class="bg-info" style="float:left">Basic Information</p><p style="float:right" class="bg-info2">Basic Information</p>
    </div>
  </body>
<html>

在 Div 中的基本 link 展示位置

Basic link placement in a Div

html

css

twitter-bootstrap-3