CSS位置没有按预期工作

我有三个文本输入（2个输入文本，1个textarea）和一个位于相对位置的div内的提交按钮。 3个文本输入和一个提交按钮都有相对位置：相对的。前两个输入（q和d）按预期排列，但最后两个输入（t和qS）偏离右侧，并且不遵循预期的CSS。我希望所有的文本框和提交按钮排列在距离左侧相同的距离下。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; 
}

来源

2011-12-26 kirby

基于这个小提琴---（http://jsfiddle.net/fjsQ5/）没有“排队”，所以你需要显示一个例子。 – Scott 2011-12-26 00:12:11

@scott q和d排队在jsfiddle和其他人不。这就是我试图修复的内容 – kirby 2011-12-26 00:23:54

实际上，如果你展开HTML窗口部分，你将看不到任何“排队”。如果你想要堆叠的东西，删除定位...（http://jsfiddle.net/fjsQ5/2/） – Scott 2011-12-26 00:40:24

你的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。没有必要设置任何位置：相对......并且不需要使用顶部，左侧和右侧。根据需要使用保证金。如果您想将所有内容都移动到一起，请将边距设置为您的表单元素。

来源

2011-12-26 00:40:03

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

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

来源

2011-12-26 00:45:40 Virendra

CSS位置没有按预期工作

回答

相关问题