如何防止输入元件超过CSS网格列的宽度
我想使用CSS网格来管理多种形式的布局。目标是使用左列中的标签元素以及右列中的输入元素的两列网格。左列的宽度需要大小以适合最宽的标签，右列应占用其余空间。这是我正在使用的网格列模板：
grid-template-columns: max-content 1fr;
我面临的问题是输入元素通常会超过右列的宽度。不幸的是，在输入元素上设置最大宽度 100％的设置不会将其大小限制为列的宽度。如果我将width设置为100％，那确实会限制大小，但是随着响应形式变得更宽，从设计角度来看，输入的100％宽度太宽了。
这是标记：
<body>
<div class="container">
<label>This is label 1</label>
<input type="text" maxlength="100">
<label>This is label 2</label>
<input type="text" maxlength="100">
<label>This is label 3 which is a bit longer</label>
<input type="text" maxlength="100">
<label>This is label 4</label>
<input type="text" maxlength="100">
</div>
</body>
这是CSS：
*, *::before, *::after {
box-sizing: border-box;
}
.container {
width: 300px;
/* width: 1300px; */
margin: 2rem auto;
background-color:lightblue;
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
grid-column-gap: 24px;
grid-row-gap:8px;
}
input {
padding: .5rem .5rem;
max-width:100%;
/* width: 12rem; */
justify-self: end;
}
这是A codepen 。
Q：如何将输入的宽度限制在约200个像素上，并使其泛滥？同时，随着形式变窄，它绝对不应超过网格列的宽度。
I want to use CSS grid to manage the layout of multiple forms. The goal is to use a two-column grid with the label elements in the left column and the input elements in the right column. The left column's width needs to be sized to fit the widest label, and the right column should take up the remainder of the space. This is the grid column template I'm using:
grid-template-columns: max-content 1fr;
The issue that I'm facing is that the input element will frequently exceed the width of the right column. Unfortunately, setting max-width to 100% on the input element does not constrain its size to the column's width. If I set the width to 100%, that does constrain the size, but as the responsive form gets wider, a 100% width on the input is too wide from a design perspective.
This is the markup:
<body>
<div class="container">
<label>This is label 1</label>
<input type="text" maxlength="100">
<label>This is label 2</label>
<input type="text" maxlength="100">
<label>This is label 3 which is a bit longer</label>
<input type="text" maxlength="100">
<label>This is label 4</label>
<input type="text" maxlength="100">
</div>
</body>
This is the CSS:
*, *::before, *::after {
box-sizing: border-box;
}
.container {
width: 300px;
/* width: 1300px; */
margin: 2rem auto;
background-color:lightblue;
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
grid-column-gap: 24px;
grid-row-gap:8px;
}
input {
padding: .5rem .5rem;
max-width:100%;
/* width: 12rem; */
justify-self: end;
}
This is a CodePen.
Q: How do I limit the width of the input to about 200 pixels and keep it flushed right? At the same time, as the form gets narrower, it should never exceed the width of the grid column.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
.container输入{min Width：0;}.container input {min-width: 0;}