Html 如何在没有边距的情况下将按钮与文本框的右侧对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18201704/
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
How to align a button to the right of text box without margin?
提问by Stefan Steiger
How can I align a button (submit) exactly to the right of a text or search box,
with the same height as the search box,
and withoutany horizontal white-space between search box and button ?
如何将按钮（提交）与文本或搜索框的右侧对齐，
与搜索框的高度相同，
并且搜索框和按钮之间没有任何水平空白？
This is what I have
这就是我所拥有的
<input type="text" value="" placeholder="search text here" style="display: block; width: 100px; height: 32px; margin: 0px; padding: 0px; float: left;" />
<input type="submit" value=" OK " style="display: block; margin: 0px; width: 20px; height: 32px; padding: 0px; float: left; border-left: none;" />
But neither is the button the same height as the textbox, and more importantly, I don't seem to be able to get rid of that 0.5 to 1mm space between text-box and button.
但按钮与文本框的高度也不相同，更重要的是，我似乎无法摆脱文本框和按钮之间 0.5 到 1 毫米的空间。
采纳答案by Stefan Steiger
Ah, I got it.
啊，我明白了。
There are two problems at once.
First, there may be no white-space between end of input 1 and start of input 2.
A known IE bug.
有两个问题。
首先，输入 1 的结尾和输入 2 的开头之间可能没有空格。
一个已知的 IE 错误。
And then, for the buttons being the same size as the text-box, it's necessary to apply the box-sizing property
然后，对于与文本框大小相同的按钮，有必要应用 box-sizing 属性
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
Like this:
像这样：
label, input {
margin: 0.1em 0.2em;
padding: 0.3em 0.4em;
border: 1px solid #f90;
background-color: #fff;
display: block;
height: 50px;
float: left;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type=text] {
margin-right: 0;
border-radius: 0.6em 0 0 0.6em;
}
input[type=text]:focus {
outline: none;
background-color: #ffa;
background-color: rgba(255,255,210,0.5);
}
input[type=submit] {
margin-left: 0;
border-radius: 0 0.6em 0.6em 0;
background-color: #aef;
}
input[type=submit]:active,
input[type=submit]:focus {
background-color: #acf;
outline: none;
}
<form action="#" method="post">
<input type="text" name="something" id="something" /><input type="submit" value="It's a button!" />
</form>
回答by Prats
<input type="text" value="" placeholder="search text here" class="txtbox" />
<input type="submit" value=" OK " class="btncls" />
.txtbox{
display: block;
float: left;
height: 32px;
width: 100px;
}
.btncls{
display: block;
float: left;
height: 40px;
margin: -1px -2px -2px;
width: 41px;
}
OR Check on Fiddle http://jsfiddle.net/Ggg2b/9/
回答by Jennifer Gahagan
To show your submit button at the right side of your search you only need to change some of your code as per given below. remove the left align from the code of button. and give the to the button is 34 px
要在搜索的右侧显示您的提交按钮，您只需按照下面给出的内容更改一些代码。从按钮的代码中删除左对齐。并将按钮设置为 34 像素
<input type="text" value="" placeholder="search text here" style="display: block; width: 100px; height: 32px; margin: 0px; padding: 0px; float: left;" />
<input type="submit" value=" OK " style="display: block; margin: 0px; width: 40px; height: 34px; padding: 0px; " />
回答by suhailvs
Add a height to the button using CSS.
使用 CSS 为按钮添加高度。
.btn {
font-size: 16px;
border: 0;
height: 34px;
margin: 0;
float:left;
}
Then add height to the textboxusing styleattribute and check whether the heights match.
然后将高度添加到textboxusingstyle属性并检查高度是否匹配。
<input type="text" value="" placeholder="search text here" style="height:28px;float:left;margin:0;" />
<input type="submit" value=" OK " class='btn' />
fiddle demo:http://jsfiddle.net/suhailvs0/Ggg2b/7/
回答by M1K1O
Put them into a container, set fix widthand heightof the container. And set the elements in the container only percentagewidth. If you will use border-box: sizing;you can add them borderand paggingwithout change container's widthand height.
把它们放入一个容器，设置固定width和height容器。并将容器中的元素设置为仅percentage宽度。如果您将使用，border-box: sizing;您可以添加它们border而pagging无需更改容器的width和height。
HTML:
HTML：
<div class="input-box">
<input class="input-1" type="text" value="" placeholder="search text here" />
<input class="input-2" type="submit" value="OK" />
</div>
CSS:
CSS：
.input-1, .input-2{
display: inline-block;
height: 100%;
margin: 0;
padding: 0;
float: left;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.input-1{
width: 70%; /* input-1 + input-2 = 100% */
}
.input-2{
width: 30%; /* input-1 + input-2 = 100% */
}
.input-box{
height: 32px; /* Own value - full height */
width: 200px; /* Own value - full width */
}
Live demo. Now new, edited.
现场演示。现在是新的，已编辑。
回答by ParVathi
put this in a paragrapgh tag and there no need for float:left
把它放在一个 paragrapgh 标签中，不需要 float:left
<p><input type="text" value="" placeholder="search text here" style="display: block; width: 100px; height: 32px; margin: 0px; padding: 0px;" />
<input type="submit" value=" OK " style="display: block; margin: 0px; width: 20px; height: 32px; padding: 0px; " /></p>
回答by Mohan Raj
Increase the width, say for example
增加宽度，例如
<input type="submit" value=" OK " style="display: block; margin: 0px; width: 100px; height: 32px; padding: 0px; float: left;" />
<input type="submit" value=" OK " style="display: block; margin: 0px; width: 100px; height: 32px; padding: 0px; float: left;" />
回答by Mr_Green
I made some changes in HTML markup. I wrapped the input boxes in divs and assigned width and height to the divs instead of the input boxes.
我对 HTML 标记做了一些更改。我将输入框包裹在 div 中，并将宽度和高度分配给 div 而不是输入框。
HTML
HTML
<div class="mainCls">
<div class="textCls">
<input type="text" value="" placeholder="search text here" />
</div>
<div class="submitCls">
<input type="submit" value=" OK " />
</div>
</div>
CSS
CSS
input[type=text], input[type=submit] {
margin: 0px;
padding: 0px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: block;
}
div.mainCls {
height: 35px;
position: relative;
border: 1px solid green;
display:inline-block;
}
.mainCls>div {
float: left;
position: relative;
height: 100%;
}
.textCls {
width: 100px;
}
.submitCls {
width: 30px;
}
If the input boxes are of fixed width, as in your case, then there is no need of child div's which I used above. You can just add left: 100px; /* width of the input text */to the submit button.
如果输入框的宽度固定，就像你的情况一样，那么就不需要我上面使用的子 div。您只需添加left: 100px; /* width of the input text */到submit button.
回答by shaijut
I accomplished this same task for a search box, I hope this may help someone.
我为搜索框完成了同样的任务，我希望这可以帮助某人。
<input type="text" name="id" id="seacrhbox" class="form-control"
placeholder="Type to search" style="width:300px;display:inline-block;margin-right: 25px;"/>
<input type="submit" value="Search" class="btn-success" style="height:32px;
width:80px;font-weight: 600;" />
Additionaly: (not related to the question)
另外：（与问题无关）
If you would like to retain the value of a textbox in an asp/mvc use:
如果您想在 asp/mvc 中保留文本框的值，请使用：
value="@Request["id"]"but if you want to do it in html try this
value="@Request["id"]"但如果你想在 html 中做到这一点，试试这个
回答by Eric G
One way to approach this is by putting the text input and the button in a container which uses grid layout. Using the below simple code, you will need to add width restraints on the container as it will expand to the max possible width:
解决此问题的一种方法是将文本输入和按钮放在使用网格布局的容器中。使用下面的简单代码，您需要在容器上添加宽度限制，因为它会扩展到最大可能的宽度：
.joined {
display: grid;
grid-template-columns: 1fr auto;
}<section class="joined">
<input type="text"></input>
<button>Go</button>
</section>Here is an example showing how it will autosize/grow with other size settings applied:
这是一个示例，展示了它如何在应用其他大小设置的情况下自动调整大小/增长：
.joined-2 {
display: grid;
grid-template-columns: 1fr auto;
min-width:280px;
width: 80vw;
}
input {
height:100px;
}<section class="joined-2">
<input type="text"></input>
<button>Go</button>
</section>