将 html 输入框限制为其周围边框的最大宽度
Posted
技术标签:
【中文标题】将 html 输入框限制为其周围边框的最大宽度【英文标题】：Restrict html input box to max width of a border around it 【发布时间】：2021-12-28 21:19:12 【问题描述】：我有以下 html 代码，其中有几个围绕输入字段和两个标签的边框实例。我希望发生的是，所有这些都被限制在它们周围的边界内；实际发生的情况是输入字段实际上忽略了边框，当输入字段超出边界线的位置时，在它上面绘制。有没有办法做到这一点？我知道我可以设置输入字段的宽度，这应该可以实现目标，但这并不是完全响应或（至少在我看来）好的 UI 设计。第一次调整窗口大小时，它可能会丢失测量值。
我希望这可能是一个相当简单的修复，但是当我尝试用谷歌搜索这个解决方案时，我发现的每个结果都是为了限制（或在某些情况下删除）输入框本身的边框，而不是封闭边框.
如果有人能在这方面提供任何帮助，我将不胜感激... （顺便说一句，任何能猜到这是为了什么的人都可以加分，因为它是如此晦涩：p ~sarcasm~）
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>【问题讨论】：
【参考方案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>【讨论】：
我知道这一定很简单，我没有想到！非常感谢你！我没有想到 100% 的宽度，因为我认为这会将尺寸扩大到页面的整个宽度。我一定总是误解了:)... @KevenM 因为你有一个很好的 HTML 结构，它只会扩展到父级的宽度。在这种情况下，这正是您想要的。没问题！以上是关于将 html 输入框限制为其周围边框的最大宽度的主要内容，如果未能解决你的问题，请参考以下文章