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/