定位註釋輸入字段

Question

什麼是使輸入字段低於列出的三個特徵的好方法？

特性：

-always 30從瀏覽器窗口中的左側像素。

- 如果尚未添加任何評論，請在「添加評論」字樣以下30px。

- 如果已添加一個或多個評論，則在前面的評論之下低於30 px。

由於提前，

約翰

HTML/PHP代碼：

<div class="addacomment"><label for="title">Add a comment:</label></div> 
    <div class="commentbox"><input class="commentsubfield" name="title" type="title" id="title" maxlength="1000"></div> 

CSS（thusfar我對 「commentbox」 選擇無申報）：

.commentsubfield { width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; } 
.addacomment 
    { 
    position:absolute; 
    width:250px; 
    left:30px; 
    top:180px; 
    text-align: left; 
    margin-bottom:3px; 
    padding:0px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color:#000000; 
    } 

Answer 1

首先，你不需要那些<div> s。您只需將class="addacomment"添加到標籤即可。

所以，你有這樣的：

<label class="addacomment" for="title">Add a comment:</label> 
<?php print $your_comments_if_any; ?> 
<input class="commentsubfield" name="title" type="title" id="title" maxlength="1000"> 

我不知道你正在使用的DOCTYPE，但你的想法。現在爲CSS：

如果你想定位相對於頁面的東西，最好記住頁面邊距。假設默認的，你會想任何保證金或填充設置爲0：

html, body { 
    margin: 0; 
    padding: 0; 
    } 

現在，你已經在做.addacomment的定位基本上是保持你得到你想要的結果。我已經剝離了不必要的東西爲清楚：

.addacomment { 
    display: block; /* override the default inline display */ 
    margin-left: 30px; /* The 30px from the left you wanted */ 
    } 

接下來，.commentsubfield只需利潤率添加到它：

.commentsubfield { 
    margin: 30px 0 30px 30px; 
    [your other styles] 
    } 

這應該給你以下結果（這是歌劇院的實際截圖10.10 OSX），但我覺得分開該領域的標籤頗爲怪異：

form element positioning example http://img.skitch.com/20100329-pbyj117655wig4pfh8estxw9me.jpg

我會建議保持輸入和相應的標籤一起。

希望我正確理解你的問題，並希望這有助於。