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％更少 margin-left＆amp; margin-right所以，在您的情况下，那将是：

width:calc(100% - 160px);

Answer 2

只需在该元素上使用width:400px;：其父元素的固定宽度为560px，减去左边距和右边距= 400px。对于旧浏览器而言比使用calc更安全，在这种情况下您真的不需要。{/ p>

http://jsfiddle.net/urm4u16z/

无法覆盖输入框的溢出

2 个答案: