首页html如何设置两个文本框在一行里使用css

html如何设置两个文本框在一行里使用css

时间: 2024-12-19 13:26:24 浏览: 23

在HTML中，如果你想让两个文本框在同一行显示，可以结合CSS的`display: inline-block`或`flexbox`布局来实现。以下是两种常见的方法： **方法一：使用`display: inline-block`** ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .text-inputs { display: flex; /* 使用 Flexbox 如果你想兼容老版本浏览器 */ } .input-field { display: inline-block; width: 45%; /* 设置每个输入框宽度，总和大于100%以留有间隔 */ margin-right: 5%; vertical-align: top; /* 保持上下对齐 */ } </style> </head> <body> <div class="text-inputs"> <input type="text" class="input-field" placeholder="文本框1"> <input type="text" class="input-field" placeholder="文本框2"> </div> </body> </html> ``` **方法二：使用Flexbox布局** ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; justify-content: space-between; /* 留出等宽的间距 */ } .input-field { width: calc(50% - 10px); /* 减去左右间距 */ } </style> </head> <body> <div class="container"> <input type="text" class="input-field" placeholder="文本框1"> <input type="text" class="input-field" placeholder="文本框2"> </div> </body> </html> ```

阅读全文