在文本框中放置一个按钮

时间：2016-11-09 09:02:59

标签： html css

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

<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按钮位于文本框下方。如何将其放在文本框中？enter image description here

我想要那个＆＃34;去＆＃34;按钮位于文本框内。

9 个答案:

答案 0 :(得分：8)

请试一试。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
    <style>
        .input-container{
            width: 250px;
            border: 1px solid #a9a9a9;
            float: left;
        }
        .input-container input:focus, .input-container input:active {
            outline: none;
        }
        .input-container input {
            width: 80%;
            float: left;
            border: none;
        }

        .input-container button {
            float: right;
        }
    </style>
</head>
<body>
    <div class="input-container">
        <input type="text" class="input-field"/>
        <button class="input-button">Ok</button>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：6)

＆＃13;
＆＃13; 
.buttonwrapper {
  display: inline-block;
}

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

button {
  margin-left: -50%;
  border: none;
  background-color: transparent;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您需要将position: absolute;提供给按钮＆amp;使用top将其置于内部。将这些样式添加到按钮

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

Codepen

＆＃13;
＆＃13; 
.buttonwrapper {
    display:inline-block;
}

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

button {
  position: absolute;
  top: 6px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

你可以在这里使用position：absolute feature，

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;}

答案 4 :(得分：1)

您需要做的是将输入字段和按钮放在一个容器中，将该容器设置为相对定位，并将按钮设置为绝对定位。容器相对定位很重要，这样才能确保按钮保持在输入区域内。

像这样：

.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>

答案 5 :(得分：1)

用于简单目的，使用此方法，

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

＆＃13;
＆＃13; 
    .buttonwrapper {
            display:inline-block;
        }

        input,
        button {
            background-color:transparent;
            border:1 solid black;
        }
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：1)

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;
}

答案 7 :(得分：0)

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

<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属性。谢谢大家的答案。

答案 8 :(得分：0)

.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>

相关问题
最新问题