CSS这里的有三个表单,竖着排下来,但是表单为何对不齐?

happyfish
  • 2.4k
<!DOCTYPE html>
        <meta charset="utf-8">
<html>
<head>
    <title>欢迎来到出去游</title>
    <link rel="stylesheet" type="text/css" href="http://localhost/cqw/css/main.css">
</head>
<body>


<div class="wrapper">
<h1>

          登录界面
    </h1>

<form >

<div class="item">
    <label>账号</label><input type="text" name="username" class="basic-input"><br/>
</div>
    <div class="item">
    <label>密码</label><input type="text" name="password" class="basic-input"><br/>
        </div>
        <div class="item">
           <label></label> <input  type="submit" value="登录" class="btn-submit">
            </div>
</form>
</div>


</body>
</html>

这是html的代码。下面CSS的代码:


*{ margin: 0px; padding: 0px; } .wrapper{ width: 950px; margin: 0 auto; } h1 { color: #494949; display: block; font-size: 25px; font-weight: bold; line-height: 1.1; margin: 0; padding: 0 0 30px; word-wrap: break-word; } .btn-submit { cursor: pointer; color: #ffffff; background-color: #3fa156; border: 1px solid #528641; font-size: 14px; font-weight: bold; padding: 6px 26px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .btn-submit:hover{ background-color: #528641; } .basic-input{ width:200px; height: 18px; font-size: 14px; padding: 5px; -webkit-border-radius: 3px; border: 1px solid #c9c9c9; } .item { clear: both; margin: 15px 0; zoom: 1; } label{ display: inline-block; width: 60px; margin-right: 12px; vertical-align: baseline; text-align: right; font-size: 14px; }

按理说出现的效果是这样:
请输入图片描述

实际上效果是这样:
请输入图片描述

为什么出现了对不齐呢?
理想很丰满。。现实很骨感啊!

回复
阅读 5.8k
1 个回答
ShingChi
  • 810
✓ 已被采纳
<label></label> <input type="submit" value="登录" class="btn-submit">

这一句去掉 labelinput 之间的空格就对齐了

http://jsfiddle.net/4XPy5/1/

宣传栏