Question

我唯一的问题是按钮与跨度不在同一行。

我该如何解决？

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<td>
  <span>Hello</span>
  <div class="text-right">
    <button class="btn btn-default">Test</button>
  </div>
</td>

Answer 1

例如，您可以float .text-right。 See my example here.

.text-right {
  float: right;
}

.text-right {
  float: right;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<td>
  <span>Hello</span>
  <div class="text-right">
    <button class="btn btn-default">Test</button>
  </div>
</td>

Answer 2

您可以使用flexbox轻松实现这一目标：

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="wrapper">
  <span>Hello</span>
  <div class="text-right">
    <button class="btn btn-default">Test</button>
  </div>
</div>

右侧的跨度和按钮非常简单

2 个答案: