HTML，CSS - 使文本框寬度相同

我有第一行有2個文本框，第二行有一個文本框的頁面。我想要使它們的寬度相同，下面的代碼的可以在Chrome中正常工作，但在Firefox和IE中（在IE9中測試）寬度不同。如何在所有瀏覽器中使寬度相同？HTML，CSS - 使文本框寬度相同

<!doctype html> 
<html> 
<body> 
<form> 
    <input type="text" name="cnop" size="2"/><input type="text" name="cno" style="width:122px;"/><br> 
    <input type="text" name="cpono"/> 
</form> 
</body> 
</html>

鉻

enter image description here

火狐

enter image description here

來源

2015-07-10 SyAu

內聯樣式一般都是餿主意。 –

您可以使用box-sizing: border-box;使輸入寬度的對齊更容易跨瀏覽器（它考慮填充，邊框和內容寬度）。它也使得像Sass這樣的預處理器中的寬度計算變得非常簡單。

input[type="text"] { 
    box-sizing: border-box; 
} 

input[name="cnop"] { 
    width: 33px; 
} 

input[name="cno"] { 
    width: 122px; 
} 

input[name="cpono"] { 
    width: 155px; 
}

檢查小提琴：https://jsfiddle.net/mshtacea/

來源

2015-07-10 00:20:51

謝謝瑞恩。你的類似於@ReLeaf，但你的答案適合我的代碼。 – SyAu

您可以爲所有3輸入標籤分配width，前兩個的總和等於第三個的值就足夠了。您還必須重置瀏覽器的輸入默認樣式。

<!doctype html> 
<html> 
<body> 
<form> 
    <input type="text" name="cnop" style="width:30px;border:0;margin:0;padding:0"/><input type="text" name="cno" style="width:122px;border:0;margin:0;padding:0"/><br> 
    <input type="text" name="cpono" style="width:152px;border:0;margin:0;padding:0"/> 
</form> 
</body> 
</html>

來源

2015-07-10 00:12:49

我試過你的邏輯（30px，122px和152px），IE正確顯示，但沒有顯示Chrome和firefox – SyAu

你必須重置所有瀏覽器的默認輸入風格。我已經更新了答案。 –

如果使用盒大小的屬性，設置窗體和百分比寬度固定寬度上你的表單輸入，一切都應該很好地保持一致。

<form style="width: 200px;"> 
 
\t <input type="text" name="cnop" size="2" style="width: 25%;box-sizing: border-box;"><input type="text" name="cno" style="width: 75%;box-sizing: border-box;"><br> 
 
\t <input type="text" name="cpono" style="width: 100%;box-sizing: border-box;"> 
 
</form>

顯然，這是最好的把這些樣式屬性到樣式標籤或樣式表，但是這是一個切割和解決方案的幹例子。

來源

2015-07-10 00:18:12 ReLeaf

您最好使用CSS來格式化控制。

<form> 
    <div class="container"> 
     <input type="text" name="cnop" class="input1"/> 
     <input type="text" name="cno" class="input2"/> 
    </div> 
    <div class="container"> 
     <input type="text" name="cpono"/> 
    </div> 
</form>

在樣式表中，添加這些類

div.container { 
    display: block; 
    width: 200px; /* or whatever overall width you need */ 
} 

div.container input { 
    width: 100%; 
} 
div.container .input1 { 
    width: 30px; /* or whatever width or percentage you need */ 
} 
div.container .input2 { 
    width: 170px; /* or whatever width or percentage you need */ 
}

來源

2015-07-10 00:27:33

HTML，CSS - 使文本框寬度相同

回答

相關問題