CSS中的新手：如何在我的情况下设置元素位置？

Question

我

<input type='text', id='name'></input> 

，我有

<p>my name is xyz</p> 

我想<p>元素位于20像素的右侧<input>，如何使用CSS实现这一目标？

Answer 1

<label><input type='text', id='name'><span style="padding-left:20px;">my name is xyz</span></label> 

Answer 2

您可以浮动的元素来实现这一点：

input { float: left; } 
p { 
    float: left; 
    margin-left: 20px; 
} 

Answer 3

我意识到，这是比简单地增加一个CSS样式声明更多一点的工作，但我可以建议你使用slightly-更多的语义标记来设计你的表单？沿着线的东西：

<form action="path/to/script.php" method="post"> 
    <fieldset> <!-- to associate related inputs --> 
     <legend>Name</legend> <!-- a broad description of this group of inputs --> 
     <input name="name" id="name" type="text" /> <!-- input elements are usually self-closing --> 
     <label for="name">My name is</label> <!-- the for attribute takes the id of the associated input, and allows a click on the label to focus the input --> 
    </fieldset> 
</form> 

然后，在CSS，如果你想label要20像素的input的权利，所有你需要做的是：

input { 
    margin-right: 20px; 
} 

/* or */ 

label { 
    margin-left: 20px; 
} 

JS Fiddle demo of margin-right。 JS Fiddle demo of margin-left。

推荐阅读：

• http://www.alistapart.com/articles/prettyaccessibleforms
• http://www.themaninblue.com/writing/perspective/2004/03/24/