0

html代码

<div id="signup">
    <p>
        <label>Frist Name</label>
        <input type="text"/>
    <p>
    <p>
        <label>Last Name</label>
        <input type="text"/>
    <p>
    <p>
        <label>Email</label>
        <input type="text"/>
    <p>
    <p>
        <label>Mobile Number</label>
        <input type="text"/>
    <p>
    <p>
        <label>Password</label>
        <input type="password"/>
    <p>
    <p>
        <label>Re Password</label>
        <input type="password"/>
    <p>
</div>

这是CSS

css

#signup{
    width: 860px;
    background-color: white;
    border:  1px black solid;
    padding: 0px;
    margin: 0px;
}
#signup p label{
    padding: 0.4em;
    color: #0986e3;
}
#signup p input{
    width: 300px;
    padding: 0.4em;
}

如果您运行此代码，您将看到左右输入文件，这并不好，我可以使用 div 或 li 纠正这个问题，但我想要这样做的最佳实践，我希望输入文件在下面准确彼此，这是 jsfiddle http://jsfiddle.net/Wiliam_Kinaan/EfBD7/中的代码

4

4 回答 4

4

使标签显示为块元素。这样，您可以设置它的宽度。但是你仍然需要它们是内联的。您需要应用其中一个float:left，否则display:inline-block它们会内联并阻止。

#signup p label{
    display:inline-block;
    width:100px;
}

/*or*/
#signup p label{
    float:left;
    width:100px;
}

如果您想支持较旧的浏览器，请使用float:left. 如果您针对新浏览器，那就display:inline-block更好了。如果您使用浮动方法，请将其添加到 CSS 以清除浮动：

#signup p{
    overflow:hidden;
    zoom:1;
}
于 2012-05-12T10:53:51.733 回答
1

给标签一个确定的宽度，例如：

#signup p label{
  padding: 0.4em;
  color: #0986e3;
  width: 100px;
  display: inline-block;
}
于 2012-05-12T10:53:58.200 回答
1

您可以使用表格吗，可能会对您的事业有所帮助，请参阅示例，抱歉没有很好地对齐标记。

于 2012-05-12T11:06:09.233 回答
1

在这里，我按照我的方式做到了。我去掉了 p 和一些 css 以使文本位于右侧。但你当然可以添加 display:inline-block;width:300px; 到标签并在html中交换标签和输入位置

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
    width: 500px;
    background-color: #ececec;
    border:  1px black solid;
    padding: 0px;
    margin: 0px;
}
#signup label{
    font:12px arial;
    color: #0986e3;
}
#signup input{
    margin:10px;
    width: 300px;
    padding 0.4em;
}
#signup input[type=button]{
    margin:10px;
    width: 80px;
    padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
    <input type="text"/>
    <label>Frist Name</label>
    <input type="text"/>
    <label>Last Name</label>
    <input type="text"/>
    <label>Email</label>
    <input type="text"/>
    <label>Mobile Number</label>
    <input type="password"/>
    <label>Password</label>
    <input type="password"/>
    <label>Re Password</label>
    <input type="button" value="click me!" />
</div>

</body>
</html>
于 2012-05-12T11:18:58.850 回答