入力ボックスのオーバーフローをカバーすることができません

Question

2つの余白の間に入力ボックスを配置しようとしていますが、右側の余白の末尾に届きます。私はwidth:100%を追加してみましたが、動作するかどうかを確認しましたが、最終的にはオーバーフローしました。当然、私はoverflow:hiddenを追加しましたが、サイコロはありません。他にどのように私はこの問題にアプローチして修正するのですか？あなたがmargin-left &の合計 100％小さくなるようにフィールドのwidthを設定するcalc() functionを使用する必要が

HTML

<div> 
     <form className = "formPosition"> 
      <h1 className = "formTitle">Hello.</h1> 
      <p className = "formDescription">Please enter your username and password</p><br/> 
      <input type = "text" className = "paddingusername" placeholder = "Username"/><br/> 
      <input type = "password" className = "paddingpassword" placeholder = "Password"/><br/> 
     </form> 
    </div> 

CSS

input[type=text], input[type=password] 
{ 
    overflow:hidden; 
    border:none; 
    font-family: Helvetica; 
    outline:none; 
    margin-left:80px; 
    margin-right:80px; 
    font-weight:lighter; 
    width:100%; 
    border-bottom: 1px solid lightgray; 
} 

.paddingusername 
{ 
    padding-top:50px; 
} 

.paddingpassword 
{ 
    padding-top:40px; 
} 

http://jsfiddle.net/eHQSR/48/

Answer 1

単にその要素にwidth:400px;を使用します。その親要素が560pxの固定幅を持っている、マイナスマージンは左と400ピクセル=右。古いブラウザではcalcを使用するよりも安全です。このような状況では本当に必要ありません。

http://jsfiddle.net/urm4u16z/

Answer 2

margin-right場合は、それは次のようになります。

width:calc(100% - 160px);