造型註釋框

Question

下面的代碼有一些文字說「添加註釋：」，一個輸入字段和一個提交按鈕。爲他們提供以下特徵的最佳方式是什麼？

由於提前，

約翰

特點：

- 具備「添加評論：」是一種叫做<div class="subcommenttitle">'.$submission.'</div>如果沒有意見底部低於30像素。

- 如果有一條評論或有兩條或更多條評論，請在上一條評論底部以下30個點的「添加評論：」。

- 具備輸入欄的頂部始終是文本低於30 PX「添加評論：」

- 具備提交按鈕的頂部始終是輸入字段的底部低於30像素。

代碼：

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

     <div class="commentsubbutton"><input name="submit" type="submit" value="Submit"></div> 

附帶的CSS，我試圖（但沒有成功）：

.commentsubbutton 
    { 
    margin: 20px 0 30px 30px; 
    text-align: left; 
    margin-bottom:3px; 
    padding:0px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    color:#000000; 
    }  

.addacomment 
    { 
    margin: 30px 0 30px 30px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color:#000000; 
    }  

.commentsubfield { margin: 30px 0 30px 30px; width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; } 

Answer 1

嘗試增加display:block;您的不同類元素。例如，「標籤」元素是默認的「內聯」元素 - 這意味着您的頂部/底部邊距根本不起作用。