只要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建議。