在文本框内放置一个按钮答案

【问题标题】：Put a button inside the text box在文本框内放置一个按钮
【发布时间】：2017-03-23 00:50:54
【问题描述】：

我正在尝试设计一个表单，在文本框中有一个按钮。我希望该按钮位于文本框内。我就是这样尝试的：

<div class="row">
    <div class="col-sm-6">
        <div class="form-group required">
            <label for="PickList_Options" class="col-sm-4 control-label">Options</label>
            <div class="col-sm-4 buttonwrapper">
                <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
                <button>GO</button>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="result" id="mydiv"></div>
    </div>
</div>

我的CSS：

.buttonwrapper {
    display:inline-block;
}

input,
button {
    background-color:transparent;
    border:0;
}

但是，问题在于，Go 按钮位于文本框下方。我应该怎么做才能将它放在文本框中？

我希望“开始”按钮位于文本框内。

【问题讨论】：

绝对定位可能是这里的最佳选择。（也就是说，如果您真的想将按钮 over 放置在输入字段上，在这种情况下，您将不得不应用额外的措施来防止它遮挡下面的文本。实际的 best 选项可能更愿意让两个元素彼此相邻，并在这两个元素周围放置圆形边框。）
How do I put a clear button inside my HTML text input box like the iPhone does?的可能重复

标签： html css

【解决方案1】：

请试试这个。在active 和focus 状态下删除input 的outline，并为输入容器添加border。

编辑：我也添加了 flex-box 实现。

显示inline-block实现

.input-container{
    width: 250px;
    border: 1px solid #a9a9a9;
    display: inline-block;
}
.input-container input:focus, .input-container input:active {
    outline: none;
}
.input-container input {
    width: 80%;
    border: none;
}

.input-container button {
    float: right;
}

<div class="input-container">
    <input type="text" class="input-field"/>
    <button class="input-button">Ok</button>
</div>

显示flex实现

.input-container {
    display: flex;
    width: 250px;
    border: 1px solid #a9a9a9;
    justify-content: space-between;
}
.input-container input:focus, .input-container input:active {
    outline: none;
}
.input-container input {
    border: none;
}

<div class="input-container">
    <input type="text" class="input-field"/>
    <button class="input-button">Ok</button>
</div>

【讨论】：

【解决方案2】：

.buttonwrapper {
  display: inline-block;
}

input{
  background-color: transparent;
  border: 2px solid black;
}

button {
  margin-left: 200px;
  border: none;
  background-color: transparent;
}

<div class="row">
  <div class="col-sm-6">
    <div class="form-group required">
      <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

      <div class="col-sm-4 buttonwrapper">
        <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
        <button>GO</button>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="result" id="mydiv"></div>
  </div>
</div>

【讨论】：

试着对你的答案做一个简短的描述，参考stackoverflow.com/help/how-to-answer

【解决方案3】：

Twitter Bootstrap 很容易做到这一点。他们称之为Input Group。如果您想在没有整个 Bootstrap 的情况下做同样的事情，请尝试 this fiddle。

这是标记

<span>
  <input type="text" value="Some text">
  <button onclick="alert('Hello!');">Click</button>
</span>

以及相关的 CSS

span {
  border: 1px solid red;
  padding: 2px;
  font-size: 0px;
  display: inline-block;
  background: white;
}

input,
button {
  display: inline-block;
  margin: 0px;
  font-size: 12px;
  background: white;
  border-style: none;
}

【讨论】：

【解决方案4】：

以上所有答案都是正确的。但是，有一种非常简单的方法可以实现它。如下：

<div class="col-sm-6">
                                <div class="form-group required">
                                    <label for="PickList_Options" class="col-sm-4 control-label">Options</label>
                                    <div class="col-sm-6">
                                        <div class="input-group">
                                          <input type="text" class="form-control">
                                          <span class="input-group-btn">
                                            <button class="btn btn-default" type="button">Add</button>
                                          </span>
                                        </div>
                                    </div>                                  
                                </div>
                            </div>

这可以解决问题。无需编写额外的 CSS 属性。谢谢大家的回答。

【讨论】：

【解决方案5】：

为了简单的目的使用这个方法，

为文本框和按钮设置固定宽度。例如：文本宽度为200px，按钮为40px并添加margin-left:-40px（根据您的需要），因此它将固定在160-200px之间输入文本框..

    .buttonwrapper {
            display:inline-block;
        }

        input,
        button {
            background-color:transparent;
            border:1 solid black;
        }

    <div class="row">
        <div class="col-sm-6">
            <div class="form-group required">
                <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

        

<div class="col-sm-4 buttonwrapper">
            <input type="text" style="width:200px" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
            <button style="width:40px;margin-left: -43px">GO</button>
        </div>
    </div>
</div>
<div class="col-sm-6">
    <div class="result" id="mydiv"></div>
</div>
</div>

【讨论】：

【解决方案6】：

您需要做的是将输入字段和按钮放在一个容器中，将该容器设置为相对定位，并将按钮设置为绝对定位。容器相对定位很重要，因此要确保按钮位于输入字段内。

像这样：

.buttonwrapper {
    display:inline-block;
    position: relative;
}

input,
button {
    background-color:transparent;
    border:0;
}

button {
  position: absolute;
  /* Adjust these two to your liking */
  top: 6px;
  right: 3px;
}

<div class="row">
  <div class="col-sm-6">
    <div class="form-group required">
      <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

      <div class="col-sm-4">
          <div class="buttonwrapper">
             <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
             <button>GO</button>
          </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="result" id="mydiv"></div> 
  </div>
</div>

【讨论】：

【解决方案7】：

您可以在这里使用位置：绝对功能，

HTML

<div class="row">
                            <div class="col-sm-6">
                                <div class="form-group required">
                                    <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

                                    <div class="col-sm-4 buttonwrapper">
                                    <div class="button-container">
                                        <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
                                        <button>GO</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="result" id="mydiv"></div>
                            </div>
                        </div>

CSS

.button-container button {  line-height: 28px;  position: absolute;  right: 0;  top: 0;}
.button-container {position:relative;}
.button-container input {padding-right:40px;}

【讨论】：

【解决方案8】：

.buttonwrapper {
  display: inline-block;
}

input{
  background-color: transparent;
  border: 2px solid black;
}

button {
  margin-left: -50%;
  border: none;
  background-color: transparent;
}

<div class="row">
  <div class="col-sm-6">
    <div class="form-group required">
      <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

      <div class="col-sm-4 buttonwrapper">
        <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
        <button>GO</button>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="result" id="mydiv"></div>
  </div>
</div>

【讨论】：

【解决方案9】：

您需要将position: absolute; 提供给按钮并使用top 将其定位在内部。将这些样式添加到您的按钮

button {
  position: absolute;
  top: 6px;
}

Codepen

.buttonwrapper {
    display:inline-block;
}

input,
button {
    background-color:transparent;
    border:0;
}

button {
  position: absolute;
  top: 6px;
}

<div class="row">
  <div class="col-sm-6">
    <div class="form-group required">
      <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

      <div class="col-sm-4 buttonwrapper">
        <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
        <button>GO</button>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="result" id="mydiv"></div> 
  </div>
</div>

【讨论】：