定位注释输入字段

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

我会建议保持输入和相应的标签一起。

希望我正确理解你的问题，并希望这有助于。