Question

将输入字段设置为低于所列三个特征的好方法是什么？

特性：

- 距离浏览器窗口左侧30 px。

- 如果没有添加评论，则低于“添加评论”字样30 px。

- 如果添加了一个或多个评论，则总是低于前一评论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（因此我没有“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>。您只需将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]
    }

这应该会给你以下结果（这是Opera 10.10 OSX的实际截图），虽然我发现将标签与其字段分开非常奇怪：

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

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

希望我能正确理解你的问题，并希望这会有所帮助。

定位注释输入字段

1 个答案: