表单中横向显示
时间: 2024-02-05 11:10:35 浏览: 25
要在表单中横向显示字段,可以使用 CSS 中的 `display: inline-block` 属性。以下是一个简单的示例:
HTML 代码:
```html
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email">
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone">
<button type="submit">提交</button>
</form>
```
CSS 代码:
```css
form label {
display: inline-block;
width: 80px;
text-align: right;
margin-right: 10px;
}
form input {
display: inline-block;
width: 200px;
}
```
在上面的 CSS 代码中,我们将 `<label>` 和 `<input>` 元素设置为 `display: inline-block`,这样它们就会在同一行上显示。我们还设置了 `<label>` 元素的宽度为 80px,并使用 `text-align: right` 属性将标签文本右对齐。最后,我们设置了 `<input>` 元素的宽度为 200px。
运行以上代码,你就可以看到表单中的字段横向排列了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)