CSS位置沒有按預期工作

我有三個文本輸入（2個輸入文本，1個textarea）和一個位於相對位置的div內的提交按鈕。 3個文本輸入和一個提交按鈕都有相對位置：相對的。前兩個輸入（q和d）按預期排列，但最後兩個輸入（t和qS）偏離右側，並且不遵循預期的CSS。我希望所有的文本框和提交按鈕排列在距離左側相同的距離下。CSS位置沒有按預期工作

標記：

<form method='POST' action='ask.php'> 
     <input type='text' id='q' > 
     <textarea id='d'></textarea> 
     <input type='text' id='t'> 
     <input type='submit' value='submit' id='qS'> 
    </form>

CSS：

#q{ 
position: relative; 
top: 30px; 
left: 20px; 
width: 400px; 
border: 1px solid orange; 
font-size: 13px; 
} 

#d{ 
position: relative; 
top: 60px; 
left: 20px; 
height: 100px; 
width: 400px; 
} 

#qS{ 
position: relative; 
    top: 20px; 
left: 20px; 
} 

#t{ 
position: relative; 
top: 20px; 
left: 100px; 
}

來源

2011-12-26 kirby

基於這個小提琴---（http://jsfiddle.net/fjsQ5/）沒有「排隊」，所以你需要顯示一個例子。 – Scott 2011-12-26 00:12:11

@scott q和d排隊在jsfiddle和其他人不。這就是我試圖修復的內容 – kirby 2011-12-26 00:23:54

實際上，如果你展開HTML窗口部分，你將看不到任何「排隊」。如果你想要堆疊的東西，刪除定位...（http://jsfiddle.net/fjsQ5/2/） – Scott 2011-12-26 00:40:24

你的CSS是相當混亂。爲了得到你想要的東西，刪除所有的CSS，並用這個替換你的HTML ...

<form method='POST' action='ask.php'> 
     <p><input type='text' id='q' ></p> 
     <p><textarea id='d'></textarea></p> 
     <p><input type='text' id='t'></p> 
     <p><input type='submit' value='submit' id='qS'></p> 
    </form>

爲了進一步的樣式和間距的使用CSS。沒有必要設置任何位置：相對......並且不需要使用頂部，左側和右側。根據需要使用保證金。如果您想將所有內容都移動到一起，請將邊距設置爲您的表單元素。

來源

2011-12-26 00:40:03

默認情況下，所有元素都是相對位置的，因此您無需爲每個元素指定它。如果你想添加邊距，填充添加到divs，它會爲你做的工作。這是一個代碼示例。 http://jsfiddle.net/cdRzW/

更新：默認位置是靜態的，而不是相對的，然而，這些元素被自動放置在HTML流並且在這種情況下，不需要相對定位。

來源

2011-12-26 00:45:40 Virendra

CSS位置沒有按預期工作

回答

相關問題