代码之家 › 专栏 › 技术社区 › JDevenyi

难以获得响应性文本输入以保持在表单的边界内

css html

JDevenyi · 技术社区 · 3 年前

我是一个初级的Web开发人员,正试图在我正在构建的简单网站中包含一个响应文本输入。在设置了适当的宽度和最大宽度后,我注意到随着页面越来越窄,输入栏没有停留在其表单容器的边界内。经过一些研究和故障排除,我确定问题是由左右边缘的输入条引起的。

有了适当的方框大小设置和无边距,响应能力将如Id所期望的那样发挥作用。我加上边距的那一刻,它就开始出界了。知道是什么原因造成的吗?我一直在努力寻找超出盒子大小设置的解决方案,非常感谢您的帮助。

        <section id="newsletter">
            <h2>Join our newsletter</h2>
            <form action="" id="inputBar">
                <input type="text" name="email" id="email" value="Enter E-mail Address">
                <input type="button" value="Submit" class="btn">
            </form>
        </section>

#inputBar {
    border: 1px solid black;
}

.btn {
    color: white;
    font-size: 24px;
    font-weight: 100;
    background-color: #1C3F74;
    border-radius: 43.5px;
    width: 220px;
    padding: 20px 15px;
    border: none;
}

#email {
    box-sizing: border-box;
    font-weight: lighter;
    font-size: 26px;
    background-color: #E5E5E5;
    border-radius: 43.5px;
    width: 100%;
    max-width: 680px;
    padding: 20px 35px;
    border: none;
    margin: 1em;
}

1 回复 | 直到 3 年前

Anonymous 3 年前

你可以试试这个:

#inputBar 
        {
                 border: 1px solid black;
                 padding:15px;
        }

        .btn {
            color: white;
            font-size: 24px;
            font-weight: 100;
            background-color: #1C3F74;
            border-radius: 43.5px;
            width: 220px;
            padding: 20px 15px;
            border: none;
        }

        #email {
            box-sizing: border-box;
            font-weight: lighter;
            font-size:26px;
            background-color: #E5E5E5;
            border-radius: 43.5px;
            width: 100%;
            max-width:680px;
            padding:20px 35px;
            border:none;
            margin:0 1em 1em 0;
        }

<section id="newsletter">
            <h2>Join our newsletter</h2>
            <form action="" id="inputBar">
                <input type="text" name="email" id="email" value="Enter E-mail Address">
                <input type="button" value="Submit" class="btn">
            </form>
        </section>