Question

下面的代码中有一些文字说“添加评论：”，输入字段和提交按钮。给他们以下特征的最佳方法是什么？

提前致谢，

约翰

特性：

- 如果没有评论，请“添加评论：”比名为<div class="subcommenttitle">'.$submission.'</div>的内容低30 px。

-Have“添加评论：”如果有一条评论或者有两条或更多评论，则比上一条评论的底部低30 px。

- 输入字段的顶部总是比文本“添加注释：”低30 px

- 提交按钮的顶部始终低于输入字段底部30 px。

代码：

 <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;添加到您的不同类元素中。例如，“label”元素是默认的“inline”元素 - 这意味着您的top / bottom边距根本不起作用。

设计评论框的样式

1 个答案: