代码之家 › 专栏 › 技术社区 › 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>

princess 3 年前

尝试添加

边距:0 1em 1em 0;

在电子邮件Id中

并添加

填充:25px;

在inputbar Id中

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前