Html 在文本框中放置一个按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40503107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put a button inside the text box
提问by SSS
I'm trying to design a form, with a button inside a text-box. I want that button to be inside the text-box. This is how I tried:
我正在尝试设计一个表单，在文本框中有一个按钮。我希望该按钮位于文本框内。这是我尝试的方式：
<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>
my css:
我的CSS：
.buttonwrapper {
display:inline-block;
}
input,
button {
background-color:transparent;
border:0;
}
But, the problem is, the Go button is placed below the text-box. What should I do to place it inside the text-box?
但是，问题是，Go 按钮位于文本框下方。我应该怎么做才能将它放在文本框中？
I want that "Go" button to be inside the text-box.
我希望“开始”按钮位于文本框内。
采纳答案by Federico
.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>回答by Nitheesh
Please try this. Remove the outlinefor the inputin activeand focusstate, and add a borderfor the input container.
请试试这个。删除outlinefor inputinactive和focusstate，并border为输入容器添加 a 。
Edit: Im adding the flex-box implementation as well.
编辑：我也添加了 flex-box 实现。
- Display
inline-blockimplementation
- 显示
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>- Display
fleximplementation
- 显示
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>回答by Suneesh Patteri
You can use position:absolute feature here,
您可以在这里使用位置：绝对功能，
HTML
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
CSS
.button-container button { line-height: 28px; position: absolute; right: 0; top: 0;}
.button-container {position:relative;}
.button-container input {padding-right:40px;}
回答by Nikhil Nanjappa
You need give position: absolute;to the button & position it inside using top. Add these styles to your button
您需要position: absolute;使用按钮将其放置在内部top。将这些样式添加到您的按钮
button {
position: absolute;
top: 6px;
}
.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>回答by Hugo Patrick Pires
What you need to do is put both the input field and the button in one container, you set that container to be positioned relatively and you set the button to be positioned absolutely. It's important that the container is positioned relatively, so to make sure the button stays within the input field.
您需要做的是将输入字段和按钮放在一个容器中，将该容器设置为相对定位，然后将按钮设置为绝对定位。容器相对定位很重要，因此要确保按钮位于输入字段内。
Like so:
像这样：
.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>
回答by Mohideen bin Mohammed
for Simple purpose use this method,
为简单目的使用此方法，
Set fixed width for both text box and button.. for eg: text width is 200px, button will be 40pxand add margin-left:-40px(based on your need) so it will be fixed between 160-200px of input text box..
为文本框和按钮设置固定宽度.. 例如：文本宽度是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>回答by Nikhil Girraj
Twitter Bootstrap does something like this very easily. They call it the Input Group. If you are looking to do the same without the whole Bootstrap'ness, try this fiddle.
Twitter Bootstrap 可以非常轻松地完成类似的操作。他们称之为输入组。如果你想在没有整个 Bootstrap'ness 的情况下做同样的事情，试试这个 fiddle。
Here's the markup
这是标记
<span>
<input type="text" value="Some text">
<button onclick="alert('Hello!');">Click</button>
</span>
and the associated CSS
和相关的 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;
}
回答by Unaiz D Qlb
.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>回答by SSS
All the above answers are correct. But, there is a very simple way to achieve it. That is as follows:
以上所有答案都是正确的。但是，有一个非常简单的方法来实现它。即如下：
<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>
This does the trick. No need to write extra css properties. Thank you all for your answers.
这就是诀窍。无需编写额外的 css 属性。谢谢大家的答案。
