我是 Web 開發的新手，我被困在一項必須在表單內制作表格的任務中，但是，我面臨著將 3 個文本框并排放置并帶有諸如“國家/地區代碼，城市代碼和電話號碼”位于同一部分的上方。我用于表格以及每個輸入和標簽。
您的電話國家代碼 -城市代碼 -電話號碼
uj5u.com熱心網友回復：
你可以在你的表中使用 colspan 或 rowspan
例子：
<table>
<tr>
<th colspan="3">Your Phone</th>
</tr>
<tr>
<td>Country code</td>
<td>City code</td>
<td>Phone number</td>
</tr>
</table>
在w3school查看更多
uj5u.com熱心網友回復：
你的Q太籠統了。您可以通過“display: grid”、“display: flex”來實作這一點。在現代網路中不需要與布局相關的表格。觀看有關 CSS 布局的在線教程/課程。
CSS 布局： https : //developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
另請閱讀：https : //stackoverflow.com/help/how-to-ask
flexbox 的一種解決方案：
.form_layout{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.form_col{
border: 1px solid red;
flex-basis: 30%;
}
input{
flex-basis: 100%;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
@media screen and (max-width: 400px) {
/* stack on mobile (change the max-width) */
.form_col{
flex-basis: 100%;
}
}<div class="form_layout">
<div class="form_col">
1
</div>
<div class="form_col">
2
</div>
<div class="form_col">
3
</div>
</div>表格示例：
.form_layout{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.form_col{
border: 1px solid red;
flex-basis: 31%;
}
input{
flex-basis: 100%;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
@media screen and (max-width: 400px) {
/* stack on mobile */
.form_col{
flex-basis: 100%;
}
}
[type="submit"]
{
margin-top: 12px;
}<form>
<div class="form_layout">
<div class="form_col">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
</div>
<div class="form_col">
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</div>
<div class="form_col">
<label for="email">email:</label><br>
<input type="text" id="email" name="email" value="[email protected]">
</div>
</div>
<input type="submit" value="Submit">
</form> 相關：輸入不尊重彈性容器寬度
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/385443.html