首页html 两行两列文本框

html 两行两列文本框

时间: 2024-11-21 18:06:12 浏览: 29

HTML 中创建两行两列的文本框（通常指输入字段，如 `<input>` 元素）可以使用表格（`<table>`）元素结合内联样式或者CSS来布局。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; flex-wrap: wrap; /* 使元素换行 */ } .box { width: calc(50% - 2px); /* 减去边距使两个并排放置，宽度为总宽的一半 */ margin: 2px; /* 为每个框添加一点间距 */ } </style> </head> <body> <div class="container"> <div class="box" style="border: 1px solid #ccc;"> <label for="text1">文本框1：</label> <input type="text" id="text1" name="text1"> </div> <div class="box" style="border: 1px solid #ccc;"> <label for="text2">文本框2：</label> <input type="text" id="text2" name="text2"> </div>  </div> </body> </html> ``` 在这个例子中，`.container` 使用 `flex` 布局，`.box` 占据总宽度的一半，并通过换行 (`flex-wrap: wrap`) 实现两行。每行有两个 `.box` 包含文本框。

阅读全文