2013-01-22 238 views
0

我不是很熟悉CSS,我想要我的登录表单上应用的边界,这里是我使用的代码:无法显示表格边框正确

的login.html:

<head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 

<div id="login_container"> 
    <form action="#" method="POST"> 
     <div class="row"> 
      <label for="username" class="label">Username</label> 
      <input type="text" class="field" name="username" /> 
     </div> 
     <div class="row"> 
      <label for="password" class="label">Password</label> 
      <input type="password" class="field" name="password" /> 
     </div> 
    </form> 
</div> 

CSS/style.css中:

#login_container { 
    margin-top:50px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 300px; 
    border:1px solid black; 
    display:block; 
} 

.field { 
    float:right; 
    margin-left: 10px; 
} 

label { 
    float:left; 

} 

.row{ 
    display:block; 
    clear:both; 
} 

和输出:

The output of the previous code

为什么边框会穿过密码文本字段?

编辑:

与 形式{ 边界:1px的实心黑色; }

输出为:

Output with form border instead og #login_container border

回答

2

添加overflow:auto;#login_container股利。

jsFiddle example

由于内部元件是浮动的,你需要指定overflow属性带来的边境周围回来。

+1

那完全解决了我的问题,谢谢! – BackSlash