按钮浮动到输入表单 HTML 的右侧答案

【问题标题】：Button floating to the right of input form HTML按钮浮动到输入表单 HTML 的右侧
【发布时间】：2020-11-04 06:04:29
【问题描述】：

我对 HTML 和引导程序很陌生

我制作了一个居中的表单，但我想在“章节标题”输入字段的右侧添加一个小按钮（红十字），但我不知道该怎么做

当前的html：

<form>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Chapter title" required>
  </div>

  <div class="form-group">
    <textarea class="form-control" rows="15"></textarea>
  </div>

  <div class="form-group" align="center">
    <button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
  </div>
</form>

我需要添加或更改什么

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

将float-right 与负边距实用程序类一起使用，例如mr-n4...

<div class="container">
    <button class="btn btn-text float-right mr-n4 close">
        <span aria-hidden="true">&times;</span>
    </button>
    <form>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Chapter title" required>
        </div>
        <div class="form-group">
            <textarea class="form-control" rows="15"></textarea>
        </div>
        <div class="form-group" align="center">
            <button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
        </div>
    </form>
</div>

https://codeply.com/p/CliBMjnlsN

【讨论】：

【解决方案2】：

@Zim 的回答有效，但我只是不喜欢使用浮动，所以我想出了另一个绝对定位的解决方案。

<form>
    <div class="form-group form-group-with-extra-button">
        <input type="text" class="form-control" placeholder="Chapter title" required>
        <button type="button" class="btn btn-extra">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="form-group">
        <textarea class="form-control" rows="15"></textarea>
    </div>

    <div class="form-group text-center">
        <button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
    </div>
</form>

.form-group-with-extra-button {
    position: relative;
}

.form-group-with-extra-button .btn-extra {
    position: absolute;
    left: 100%;
    top: 0;
    color: var(--danger);
}

演示： https://jsfiddle.net/davidliang2008/1dpz0w52/24/

【讨论】：

【解决方案3】：

这不是我真正想要的，但我想这就是我要坚持的

<form>
  <div class="form-group input-group">
    <input type="text" class="form-control" placeholder="Chapter title" required>
    <div class="input-group-append">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false"></button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Delete chapter</a>
        <a class="dropdown-item" href="#">Add chapter before</a>
        <a class="dropdown-item" href="#">Add chapter after</a>
      </div>
    </div>
  </div>

  <div class="form-group">
    <textarea class="form-control" rows="10"></textarea>
  </div>

  <div class="form-group" align="center">
    <button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
  </div>
</form>

【讨论】：