Question

我需要右对齐＆lt; div＆gt;中的超链接，但是我能让它向右移动的唯一方法是使用＆lt; p＆gt;标签。这会将超链接放在一个新行而不是同一行。

如何在同一条线上获取它，还能留出一些间距？现在它看起来像一个句子

     <div>
         <label class="control-label" for="ddlProfile">Profile:</label>
          <input type="text" data-ng-model="viewModel.Name" class="form-control"  />
          <button >New</button>
          <button >Edit</button>
          <p style="text-align:right; display:block; margin:auto"><a href="https://www.w3schools.com" >Open New Form</a>
          <a href="https://www.w3schools.com">Display Detail</a></p>
     </div>

Answer 1

您可以使用flexbox。将内容分为两部分 - 一部分用于左侧，另一部分用于右侧。然后使用margin根据需要定位右侧。

.flex {
  display: flex;
}

.right {
  margin-left: auto;
}
/* your second question */

.right a {
  margin-left: 1em;
}

<div class="flex">
  <div class="left">
    <label class="control-label" for="ddlProfile">Profile:</label>
    <input type="text" data-ng-model="viewModel.Name" class="form-control" />
    <button>New</button>
    <button>Edit</button>
  </div>
  <div class="right">
    <a href="https://www.w3schools.com">Open New Form</a>
    <a href="https://www.w3schools.com">Display Detail</a>
  </div>
</div>

Answer 2

为什么不将元素浮动到右边？但是你需要改变元素的顺序。

.float-right{
  float:right;
}

.right-space{
  padding-right:10px;
}

<div>
  <label class="control-label" for="ddlProfile">Profile:</label>
  <input type="text" data-ng-model="viewModel.Name" class="form-control" />
  <button>New</button>
  <button>Edit</button>
    <a class="float-right" href="https://www.w3schools.com">Display Detail</a>
  <a class="float-right right-space" href="https://www.w3schools.com">Open New Form</a>
</div>

如何正确对齐<div>中的超链接？

2 个答案: