只要div包含它，我如何制作<input>标签？

Question

我有一个标签，表格输入旁边，像这样：

<div id="loginbox"> 
    <form> 
     <div> 
      <span>Username</span> 
      <input type="text"> 
     </div> 

     <div> 
      <span>Password</span> 
      <input type="password"> 
     </div> 

     <div> 
      <input type="submit" value="Login"> 
     </div> 
    </form> 
</div> 

然后，我有一些CSS，设置了登录框的宽度和跨度领域，像这样：

#loginbox { 
    border: 1px solid black; 
    width: 300px; 
} 

#loginbox span { 
    display: inline-block; 
    width: 80px; 
    text-align: right; 
} 

下面是该代码的jsfiddle：

http://jsfiddle.net/7TNNq/

注意如何输入框不跨越整个长度Ø分区。我如何才能让它完全展开？

Answer 1

参见：http://jsfiddle.net/thirtydot/tgGLv/

CSS：

#loginbox { 
    border: 1px solid black; 
    width: 300px; 
} 

#loginbox label { 
    float: left; 
    width: 80px; 
} 
#loginbox span { 
    display: block; 
    overflow: hidden; 
    padding: 0 4px 0 0; 
} 
#loginbox span input { 
    width: 100%; 
} 

HTML：

<div id="loginbox"> 
    <form> 
     <div> 
      <label>Username</label> 
      <span><input type="text"></span> 
     </div> 

     <div> 
      <label>Password</label> 
      <span><input type="password"></span> 
     </div> 

     <div> 
      <input type="submit" value="Login"> 
     </div> 
    </form> 
</div> 

Answer 2

你可以把

#loginbox div input { 
    width: 70%; 
} 

将扩大到div的边缘，但我敢肯定有一个更好的方式去了解它。

希望这会有帮助

Answer 3

这是它。

http://jsfiddle.net/7TNNq/35/

或者您可以设置固定宽度为@spike建议。