css - 无法覆盖输入框溢出

Question

我试图在两个边距之间放置一个输入框，但它到达了右侧边距的末端。我尝试添加 width:100% 以查看它是否有效，但最终它溢出了。当然，我添加了 overflow:hidden 但没有骰子。我还能如何处理和解决这个问题？

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

您需要使用 calc() function将字段的 width 设置为 100% less margin-left 和 margin-right 的总和所以，在你的情况下，那将是:

width:calc(100% - 160px);