html代码

Question

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纠正这个问题，但我想要做到这一点的最佳实践，我希望输入filds到彼此之间相形见绌，这是jsfiddle中的代码 http://jsfiddle.net/Wiliam_Kinaan/EfBD7/

Answer 1

Make the labels display as block elements。这样，你可以设置它的宽度。但你仍然需要他们内联。您需要应用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会更好。 If you use the float approach，将其添加到CSS以清除浮动：

#signup p{
    overflow:hidden;
    zoom:1;
}

Answer 2

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

#signup p label{
  padding: 0.4em;
  color: #0986e3;
  width: 100px;
  display: inline-block;
}

Answer 3

你能否使用表格，可能有助于你的事业，see the example，抱歉没有很好地对齐标记。

Answer 4

在这里，我做了我将如何做到这一点。我剥离了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>

对齐html的最佳做法是什么？

html代码

的CSS

4 个答案: