将 html 输入框限制为其周围边框的最大宽度

Question

我有以下 html 代码，其中有多个边框实例围绕着一个输入字段和两个标签。我希望发生的是，所有这些都被限制在它们周围的边界内；但实际上发生的是输入字段实际上忽略了边框，当输入字段超出边界线所在的位置时在其上绘制。有没有办法做到这一点？我知道我可以设置输入字段的宽度，这应该可以实现目标，但这不是完全响应或（至少在我看来）良好的 UI 设计。第一次调整 window 的大小时，它可能会影响测量结果。

我希望这可能是一个相当简单的修复，但是当我尝试 google 这个作为解决方案时，我发现的每个结果都是限制（或在某些情况下删除）输入框的边框本身，而不是封闭的边框。

我将不胜感激有人可以为此提供的任何帮助... （顺便说一句，任何能猜出这是干什么的人都可以加分，因为它太晦涩了：p ~讽刺~）

   section, h1 {
        padding: 0 1em;
    }
    
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 150px);
        grid-template-rows: repeat(3, 150px);
        grid-gap: 50px 30px;
    }
    
    .grid-item {
        border: thin #566d7e solid;
        padding: 10px;
    }
    
    .grid-item > label {
        text-align: center;
    }
    
    .grid-item > input {
        margin: 2px;
        word-wrap: true;
    }

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="css\abilitiesStyle.css" as="style">
        </head>
    </html>
    <body>
        <header>
        </header>
        <main>
            <article>
                <h1>Abilities, Saves, Senses</h1>
                <section>
                    <div class="grid">
                        <div class="grid-item">
                            <label>STRENGTH</label>
                            <input type="number" name="strengthScore">
                            <label id="strengthModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>DEXTERITY</label>
                            <input type="number" name="dexterityScore">
                            <label id="dexterityModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>CONSTITUTION</label>
                            <input type="number" name="constitutionScore">
                            <label id="constitutionModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>INTELLIGENCE</label>
                            <input type="number" name="intelligenceScore">
                            <label id="intelligenceModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>WISDOM</label>
                            <input type="number" name="wisdomScore">
                            <label id="wisdomModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>CHARISMA</label>
                            <input type="number" name="charismaScore">
                            <label id="charismaModifier"></label>
                        </div>
                    </div>
                </section>
            </article>
        </main>
        <footer>
        </footer>
    </body>

Answer 1

您可以通过 input[type=number] 设置输入类型的样式并将宽度设置为 100%。我还添加了 - margin-left 以使输入字段居中。此方法在所有屏幕上都是 100% 响应。

   section, h1 {
        padding: 0 1em;
    }
    
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 150px);
        grid-template-rows: repeat(3, 150px);
        grid-gap: 50px 30px;
    }
    
    .grid-item {
        border: thin #566d7e solid;
        padding: 10px;
    }
    
    .grid-item > label {
        text-align: center;
    }
    
    .grid-item > input {
        margin: 2px;
        word-wrap: true;
    }
/* additions */    
   input[type=number] {
      width: 100%;
      margin-left: -.2rem;
}

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="css\abilitiesStyle.css" as="style">
        </head>
    </html>
    <body>
        <header>
        </header>
        <main>
            <article>
                <h1>Abilities, Saves, Senses</h1>
                <section>
                    <div class="grid">
                        <div class="grid-item">
                            <label>STRENGTH</label>
                            <input type="number" name="strengthScore">
                            <label id="strengthModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>DEXTERITY</label>
                            <input type="number" name="dexterityScore">
                            <label id="dexterityModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>CONSTITUTION</label>
                            <input type="number" name="constitutionScore">
                            <label id="constitutionModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>INTELLIGENCE</label>
                            <input type="number" name="intelligenceScore">
                            <label id="intelligenceModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>WISDOM</label>
                            <input type="number" name="wisdomScore">
                            <label id="wisdomModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>CHARISMA</label>
                            <input type="number" name="charismaScore">
                            <label id="charismaModifier"></label>
                        </div>
                    </div>
                </section>
            </article>
        </main>
        <footer>
        </footer>
    </body>

将 html 输入框限制为其周围边框的最大宽度

Restrict html input box to max width of a border around it

html

css

layout

input

border