Question

我在div中有三个文本输入（2个输入文本，1个textarea）和一个提交按钮，位置为：relative。 3个文本输入和一个提交按钮都有位置：相对。前2个输入（q和d）按预期排列，但最后两个（t和qS）位于右侧，不遵循预期的CSS。我希望所有的文本框和提交按钮在左下方相同的距离排列。

标记：

 <form method='POST' action='ask.php'>  
        <input type='text' id='q' >
        <textarea id='d'></textarea>
        <input type='text' id='t'>
        <input type='submit' value='submit' id='qS'>
    </form>

CSS：

 #q{
 position: relative;
 top: 30px;
 left: 20px;
 width: 400px;
 border: 1px solid orange;
 font-size: 13px;
 }

 #d{
 position: relative;
 top: 60px;
 left: 20px;
 height: 100px;
 width: 400px;
 }

 #qS{
 position: relative;
  top: 20px;
 left: 20px;
 }

 #t{
 position: relative;
 top: 20px;
 left: 100px;
 }

Answer 1

你的CSS非常混乱。要获得您想要的内容，请删除所有CSS并用此替换您的HTML ...

 <form method='POST' action='ask.php'>  
        <p><input type='text' id='q' ></p>
        <p><textarea id='d'></textarea></p>
        <p><input type='text' id='t'></p>
        <p><input type='submit' value='submit' id='qS'></p>
    </form>

对于进一步的样式和间距使用CSS。没有必要设置任何位置：相对......并且也不需要使用顶部，左侧，右侧。只需在需要时使用保证金。如果要将所有内容一起移动，请将margin设置为表单元素。

Answer 2

默认情况下，所有元素都是相对定位的，因此您无需为每个元素指定它。如果你想添加边距，填充添加到div，它将为你工作。这是代码的一个例子。 http://jsfiddle.net/cdRzW/

更新：默认位置是静态的而不是相对的，但是，元素会自动放在HTML流中，在这种情况下，不需要相对定位。

CSS职位不按预期行事

2 个答案: