我想使用 CSS 網格來管理多個表單的布局。目標是使用兩列網格，其中標簽元素位于左列，輸入元素位于右列。左列的寬度需要調整大小以適合最寬的標簽，右列應占據剩余空間。這是我正在使用的網格列模板：
grid-template-columns: max-content 1fr;
我面臨的問題是輸入元素會經常超過右列的寬度。不幸的是，將max-width輸入元素設定為 100% 不會將其大小限制為列的寬度。如果我將 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;
}
這是一個CodePen。
問：如何將輸入的寬度限制在 200 像素左右并保持正確？同時，隨著表格變窄，它不應該超過網格列的寬度。
uj5u.com熱心網友回復：
.container input {min-width: 0;}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/482981.html