我需要有一個按鈕和一個tex框坐在一起，他們必須完美地對齊，如果一個比另一個大，那么它會立即顯而易見。
通常我不會在意瀏覽器之間的小差異，但是這兩個輸入在每個頁面上都處于非常突出的位置，是網站的一大特色，所以它們必須在所有主要的瀏覽器和縮放級別上完美地對齊。
有沒有人對如何實現這一點有什么建議？
只是作為一個快速的例子，我正在努力實現:新的谷歌主頁。開始輸入后，自動補全功能開始生效，搜索框移到頂部，一個藍色按鈕與文本框完全對齊。它可以完美地跨瀏覽器工作，但它是在一個表格中標記的。這是否意味著這可能是實現這一目標的最佳方式？
我建議嘗試設計輸入/按鈕對的父元素(在我的例子中是一個字段集)的樣式，以便給出一個通用的字體大小和字體系列，然后使用em度量來設計子元素的尺寸/填充/邊距。理想情況下，用相同的CSS樣式化所有的子元素。
給定以下加價:
<form action="#" method="post">
<fieldset>
<label for="something">A label for the text-input</label>
<input type="text" name="something" id="something" />
<button>It's a button!</button>
</fieldset>
</form>我建議使用類似于以下CSS的內容，但要適應您的特定設計:
fieldset {
font-size: 1em;
padding: 0.5em;
border-radius: 1em;
font-family: sans-serif;
}
label, input, button {
font-size: inherit;
padding: 0.2em;
margin: 0.1em 0.2em;
/* the following ensures they're all using the same box-model for rendering */
-moz-box-sizing: content-box; /* or `border-box` */
-webkit-box-sizing: content-box;
box-sizing: content-box;
}JS提琴演示。
在澄清這是復制/再現谷歌的文本輸入/提交按鈕的風格之后:
fieldset {
font-size: 1em;
padding: 0.5em;
border-radius: 1em;
font-family: sans-serif;
border-width: 0;
}
label, input, button {
font-size: inherit;
padding: 0.3em 0.4em;
margin: 0.1em 0.2em;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #f90;
background-color: #fff;
}
input {
margin-right: 0;
border-radius: 0.6em 0 0 0.6em;
}
input:focus {
outline: none;
background-color: #ffa;
background-color: rgba(255,255,210,0.5);
}
button {
margin-left: 0;
border-radius: 0 0.6em 0.6em 0;
background-color: #aef;
}
button:active,
button:focus {
background-color: #acf;
outline: none;
}JS提琴演示。
盡管上述內容在Chromium 12.x和Opera 11.5 (Ubuntu 11.04)中運行良好，但Firefox在后一個演示中似乎顯示了一兩個額外的像素。
我認為這是非常可靠的:
http://codepen.io/herrfischer/pen/pbkyoJ
在這兩個元素上，只需使用:
display: inline-block;
padding: 10px 15px;
font-size: 20px;
border-radius: 0;
-webkit-appearance: none;
border: 1px solid transparent;并使用“normalize . CSS”——僅此而已。在iPhone上也很好看:
為了達到這個目標，我已經糾結了幾個小時了。經過大量的研究和實驗，以下是在Chrome、Firefox、IE、Opera和Safari(至少是當代版本)中解決OP問題的方法:
對于需要對齊的所有類型的節點(按鈕、輸入、選擇)，使用關于盒子模型的相同CSS 一定要明確指定邊框(或者至少是它的寬度)； 不要明確指定高度。 是的，就是這么回事。下面是產生預期結果的最簡單的CSS:
select, input, button {
border-width: 0px;
}如果你需要進一步的樣式，請隨意添加顏色、填充和空白——一切都會好的。但是，無論你做什么，不要明確指定高度。這是唯一的障礙，因為每個瀏覽器計算高度的方式不同；有些會在選擇上方而不是按鈕上方留下一兩個額外的像素，有些會在按鈕上方而不是選擇上方留下像素，有些會按預期工作。
聲明一下，Chrome在這方面似乎是最一致的(也就是說，如果你確實指定了高度)——不過話說回來，誰在乎呢。
在2019年，你希望你的表單使用CSS Grid，即使它們只有一個輸入和一個按鈕。
這樣省了很多痛苦。
我有很多工作示例，所以我不會在這里張貼工作示例。相反，以下是你需要知道的事情。
外部容器可以是表單，為此CSS是display:grid；網格-模板-行:2em網格-模板-列:1fr auto
輸入應該有一個標簽，我假設它被設置為隱藏。因此輸入的CSS有grid-column:1；身高:100%；按鈕有網格-列:2；高度:100%
你要做你自己的事情，比如邊距、背景、填充、邊框、邊框半徑等等。
讓按鈕與輸入對齊的關鍵是在ems或另一個敏感響應友好單元中使用具有固定高度的網格行，并將輸入和按鈕設置為100%的高度。
我沒有發現上面的任何一個答案能產生像CSS Grid選項那樣簡潔和易于管理的代碼，CSS Grid選項在Firefox、Chrome和基于Webkit的瀏覽器上對我有效。
請注意，如果使用CSS網格，那么您的表單中需要零個div元素，但是，如果使用字段集，您可能需要將它們設置為display: content as CSS Grid不適用于字段集。
我在網上查了很多資源，如何做到最好，跨瀏覽器，主題獨立。我希望我有解決方案，但它不是100%(它需要通過垂直CSS填充來修剪)。我的問題是讓標簽和文本輸入具有相同的寬度和緊湊。
希望的結果:
我通過幾次實驗找到的解決方案在我的博客中有描述:http://vasvadev . blogspot . cz/2013/02/CSS-exact-same-height-and-alignment-of . html
解決辦法 CSS:
div.lf-ui-label {
margin: 0px;
font-size: inherit;
font-weight: bold;
background-color: #CCCCCC;
border-width: 0px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
padding-top: 4px;
padding-bottom: 4px;
}
div.lf-ui-label + input.lf-ui-form-item {
padding: 5px 10px 5px 10px;
margin: 0px 0px 0px -10px;
font-size: inherit;
background-color: #2b55a8 !important;
vertical-align: middle;
border-width: 0px;
}
input.lf-ui-form-item {
background-color: #3b3b3b;
font-size: inherit;
padding: 4px 7px 4px 7px;
font-weight: bold;
border: none 0px;
outline: none;
}HTML:
<div style="padding:10px; font-family: Calibri; font-size: 14px;">
<div class="lf-ui-label"
style="width:25%; padding-left: 10px;">Field text 14px </div><input
class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>
<div style="padding:10px; font-family: Calibri; font-size: 14px;">
Field text <input class="lf-ui-form-item" type="text" value="some other value"/>
</div>我的實驗代碼由js fiddle:css-exact-same-height-and-alignment-of.html分享
幾天來我一直試圖解決這個問題，但每個解決方案都不完整，也不能在不同的瀏覽器中運行。
我發現這段代碼可以完成工作:
float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;我已經更新了小提琴-https://jsfiddle.net/p9maozk2/
您的另一個選擇是使用Bootstrap。我通過將類“input-group”分配給包裝輸入和按鈕的div來解決這個問題。
當試圖以跨瀏覽器的方式實現完美的像素尺寸時，您應該做的第一件事就是考慮實現CSS重置。我更喜歡HTML5樣板文件，但是你也可以從谷歌上找到其他的。
CSS重置是規范跨瀏覽器差異的基礎(尤其是在處理表單時)。
對于IE:您可以通過使用條件樣式表來設計不同的樣式:
<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie7e" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->所以你會寫:
.ie6 .my-button-class {
//
}我發現這個解決方案似乎行得通。嘗試添加:
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;添加到兩個元素的當前css中，這仍然會使它們稍微錯位，然后在錯位的元素中使用頂部填充。我發現:
padding-top: 2px;為我工作。
這是一個垂直對齊的input + button組合的例子，元素之間沒有邊距(由于font-size:0px ),當選擇時，輸入字段的垂直高度不會增加；這里字體大小控制垂直高度，而行高會導致垂直錯位。
超文本標記語言
<div class="emailbuttonparent">
<input type="email" class="emailaddr" placeholder="email" />
<input type="button" value="Get Started" />
</div>鋼性鑄鐵
.emailbuttonparent {
font-size: 0;
}
select, input, button {
display:inline-block;
border-width: 0px;
font-size: 25px;
}
input[type="email"]:focus {
background-color: #f1f1f1;
color: #fff;
outline: 0;
}嗯，這是一個很好的十年左右，我對已經發布的任何內容都不滿意，所以我花了幾天時間來解決這個問題，至少在以下瀏覽器版本中可以完美地工作:
Chrome & gt= 4 Firefox & gt= 4 Safari & gt= 3 Opera & gt= 11 IE & gt= 9 邊緣97 超文本標記語言
<div id="container">
<input type="text">
<button>test</button>
</div>半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
#container,
#container input,
#container button {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
#container {
display: table;
}
#container input,
#container button {
float: left;
display: table-cell;
padding: 0;
height: ...; /* e.g. 2.8em */
font-size: ...; /* e.g. 14px */
border: ...; /* e.g. 1px solid red */
}除了上述最低要求的CSS規則，你可以改變大多數其他常用的樣式規則，如顏色、背景色、框陰影、邊框半徑等。無論你喜歡什么。然而，有些事情可能會限制你的風格選擇。例如，您應該避免添加/調整填充，尤其是頂部/底部，因為它可能會剪切文本(如果可能，請使用高度/寬度規則)。
使用帶有圖像的背景div作為輸入。這更容易保持一致。此外，絕對定位對于這種情況也很有用。
編輯:這個答案是我5年前寫的，現在有更好的辦法。
.sdiv {
padding-top: 33px;
padding-left: 33px;
height: 123px;
border: 1px dotted red;
border-radius: 7px;
background-color: Black;
}
.sbtn {
float:left;
height:24px;
width: 24px;
padding: 3px 0 0 0;
border:none;
margin-top: 14px;
background-color: white;
}
.stxt {
width: 180px;
height:22px;
float:left;
border:none;
padding-left:3px;
margin-top: 14px;
}<div class="sdiv">
<form action="/">
<input class="stxt" type="text" placeholder="Search..." value="">
<button class="sbtn" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" role="icon" viewBox="0 0 18 18" width="18" height="18">
<path fill-rule="evenodd" d="M 12.864 11.32 h -0.813 l -0.288 -0.277 A 6.66 6.66 0 0 0 13.38 6.69 a 6.69 6.69 0 1 0 -6.69 6.69 a 6.66 6.66 0 0 0 4.354 -1.617 l 0.278 0.288 v 0.813 L 16.467 18 L 18 16.467 l -5.136 -5.146 Z m -6.174 0 a 4.625 4.625 0 0 1 -4.632 -4.63 A 4.625 4.625 0 0 1 6.69 2.058 a 4.625 4.625 0 0 1 4.63 4.632 a 4.625 4.625 0 0 1 -4.63 4.63 Z" />
</svg>
</button>
</form>
</div>