首页两个怎么input上下排布

两个怎么input上下排布

时间: 2024-10-21 21:09:20 浏览: 10

在HTML布局中，如果你想让两个输入框上下排列，可以使用一些基本的CSS和HTML结构来实现。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> /* 使用display属性控制元素布局 */ .container { display: flex; /* 列表模式，可以让内容并排 */ } .input-row { flex-direction: column; /* 设置为垂直方向 */ width: 40%; /* 可调整宽度，这里为了演示 */ } input[type="text"] { margin-bottom: 10px; /* 增加间距 */ } </style> </head> <body> <div class="container"> <div class="input-row"> <label for="input1">输入1：</label> <input type="text" id="input1" name="input1"> </div> <div class="input-row"> <label for="input2">输入2：</label> <input type="text" id="input2" name="input2"> </div> </div> </body> </html> ``` 在这个例子中，`.container` 使用了 `flex` 布局，`.input-row` 具有 `flex-direction: column`，使得每个 `.input-row` 中的输入框按照从上到下的顺序排列。你可以根据需要修改样式或调整容器大小。

阅读全文