CSS 位置未按预期运行

Question

我在 div 中有三个文本输入(2 个输入文本，1 个文本区域)和一个提交按钮，位置为:相对。 3 个文本输入和一个提交按钮也都具有 position:relative。前 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。不需要为 position:relative... 设置任何东西，也不需要使用 top,left,right。只需在需要的地方使用 margin 。如果您想将所有内容移动到一起，请为您的表单元素设置边距。