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

Question

我有

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

我有

<p>my name is xyz</p>

我希望<p>元素位于 20px <input>的右侧侧，如何使用 CSS 实现这个目标？

Answer 1

我意识到这比简单地添加CSS样式声明要多一些工作，但是我可以建议您使用稍微更多的语义标记来设置表单样式吗？有点像：

<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位于input右侧20px，您需要做的就是：

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/

Answer 2

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

Answer 3

您可以浮动元素以实现此目的：

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