爲什麼我的輸入不對齊？

我需要一些幫助。我是新的CSS，所以我不知道爲什麼我的輸入「textarea」不垂直與其他輸入對齊？它更1或2像素向右......爲什麼我的輸入不對齊？

這裏是我的jsfiddle： http://jsfiddle.net/uxpedro/tDxc5/14/

form{ 
width:255px; 
height:266px; 
margin: 0 auto; 
margin-top:200px; 
} 


input[type=text]{ 
    font-family:verdana; 
    width:250px; 
    height:40px; 
    padding-left:5px; 
    background-color:rgba(255,255,255,0.95); 
    border-style:none; 
} 

textarea{ 
    font-family:verdana; 
    margin-top:30px; 
    max-width:250px; 
    min-width:250px; 
    min-height:100px; 
    max-height:200px; 
    background-color:rgba(255,255,255,0.95); 
    border-style:solid; 
    border-color:rgba(215, 40, 40, 0.9); 
} 

input[type=submit]{ 
    margin-top:-3px; 
    width:250px; 
    height:40px; 
    color:white; 
    background-color:rgba(215, 40, 40, 0.9); 
    border-style:none; 
    }

來源

2014-06-21 Pedro F.

您有'margin-top：30px;'設置爲'textarea'。將其更改爲'margin-top：4px;' – tsHunter

對不起，我不是非常具體，我的意思是垂直對齊，「textarea」更向右或向右移動2px ... –

我發現問題是你的textarea上的邊框，它不是提交按鈕不夠寬，而是textarea上的額外寬度。

在樣式化網站時請記住盒子模型。

這裏有一個更新的小提琴，我很抱歉，如果我搞砸了太多與它，我只是想更簡單爲您：http://jsfiddle.net/tDxc5/16/

嘗試設置形式紅色的背景，這樣你可以看到一切現在是窗體的寬度（我認爲這是你想幹什麼。）

幾件事情：

我刪除了一切，但形式，所以你可以很容易地閱讀。

要注意的一個規則是box-sizing: border-box; - 它通常會計算您爲元素設置的填充，因此如果寬度爲200px且填充爲10px，則它將變爲220px，因爲您將填充設置爲10px 。使用該規則，它將知道從原始寬度取20px以使其適合您實際設置的內容。

我用/>關閉了你的輸入，因爲jsfiddle告訴我，你不必這樣做。

使用placeholder=""，而不是value="" - 如何風格佔位符：http://css-tricks.com/snippets/css/style-placeholder-text/

在這些情況下，你做了你應該真的不使用高度，爲textarea的目的，我添加了一個resize: vertical;，以確保它不能去出於表單元素。

希望這會有所幫助！

來源

2014-06-21 23:13:31

Chrome瀏覽器的用戶代理樣式表（又名瀏覽器的「默認CSS樣式」）規定，對文本區域，2px的邊距。由於您只聲明margin-top屬性，因此您可以從檢查員處看到（通過右鍵單擊文本區域並選擇Inspect element），剩餘的三個邊距仍設置爲2px。

爲了讓它與其他對齊，只需將margin-top:30px替換爲margin:30px 0 0即可。

來源

2014-06-21 22:47:17 bardo

爲什麼我的輸入不對齊？

回答

相關問題