CSS实现form表单不换行

最新推荐文章于 2021-12-27 17:41:07 发布
最新推荐文章于 2021-12-27 17:41:07 发布
阅读量3.6k 收藏 1
点赞数 2
分类专栏： Other 文章标签： 表单 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guohaote/article/details/48195347
版权

在HTML中插入form表单后，发现会自动换行，破坏布局。


解决方法：


<form style="margin:0px;display:inline;" >
</form>

猎人小子
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现强制不换行/自动换行/强制换行
燕子钨
08-29 1377
强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{ word-break:break-all; }  
FORM 不换行的方法
09-25
在写 Html 的时, 写到 FORM 会让造成空隔多空一行 等等的问题。
设置<form>表单不换行
ballkingyao的专栏
08-01 1512
一般情况，form表单会在页面默认换一行 asdasda 可在CSS中设置： form{margin:0px;display: inline}
使用样式表 控制 from 不换行
HouYing
06-20 1126
form{margin:0px;display: inline}在样式表中添加这句
Form表单不换行
weixin_42634040的博客
01-02 2539
.el-form { white-space: nowrap; }
form表单不换行
flymoringbird的博客
01-21 8847
style="margin:0px;display:inline;">
插入表单form上下都会空出一行的解决方法
12-14
其实表单form上下出现的空行并不是真正的空行，而是表单form自带了一个默认的margin值，只是这个值并且不等于0，所以我们只需要用css控制form的margin=0就可以解决这一问题了，CSS代码如下： 复制代码代码如下:form...
H5+CSS3.zip
08-06
表单标签：使用<form>创建表单，文本输入框，密码输入框，数字输入框，网址输入框，邮箱输入框，创建文本域，单选框，复选框，使用select、option创建下拉菜单，提交按钮，重置按钮； CSS3部分具体内同包括: css...
Bootstrap表单组件教程详解
09-02
1. 内联表单（Inline forms）：通过在`<form>`标签上添加`.form-inline`类，可以实现表单控件在同一行内显示。这通常适用于需要紧凑布局的情况。为了防止`<label>`标签导致的换行，可以将`<label>`和相应的输入控件...
CSS块级元素与行级元素详解
09-27
例如，`<p>`标签（段落）、`<form>`标签（表单）、以及`<div>`标签（通用布局容器）都是常见的块级元素。块级元素的特点是它们会占据整个宽度，如没有CSS干预，它们会默认按照垂直方向排列。通过CSS，我们可以改变...
form表单不换行显示
IT丶WE丶OWN 的专栏
12-13 6283
在写 Html 或Jsp的时, 写到 FORM 会让造成空隔多空一行 等等的问题。 1.通过css样式解决   form{margin:0px;display: inline} margin: 上下左右间隔都设为 0px      display: inline 之后显示的秀在同一行.      想不换行也是同样解法.   只要       就可以了. 2. 将 Form 塞到
form不换行
lxlyynnah的专栏
09-10 385
用table 或者 style="display: inline;" 可以让form不换行
一行内显示，不换行
m0_56187277的博客
12-27 955
限制旨在一行内显示，即使缩小屏幕也不会挤到下一行 ::v-deep .el-form-item__label { white-space: nowrap; }
表单 form-inline 内容一行显示时，换行
热门推荐
weixin_36404364的博客
05-31 1万+
表单元素一行显示时，由于屏幕宽度不够时，自动换行不好看 可以在指定位置手动换行 自还要增加标签<br/> form 一个表单的简单写法： <form class="form-inline" id="search_form"> <div class="form-group"> <label>产品名称:</label...
form表单title不换行
zyh20090823的博客
05-11 697
wrapTitle: false
39-HTML标签 表单标签 表单项 这里html和css种＜br＞是换行
shwjakak的博客
11-28 577
* 表单项标签： * input：可以通过type属性值，改变元素展示的样式 * type属性：type里面有很多种标签样式 比如text passwod等等等 * text：文本输入框，默认的 * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 * password：密码...
按下Enter键分别实现换行和提交表单
keketrtr的专栏
10-27 2005
一、按下Enter提交表单：在输入框中加上下面一句：onkeydown="if(event.keyCode==13) document.getElementById("提交按钮的ID").click()"或者定义一个function，将上面引号部分放进去二、按下Enter换行：onkeydown="if(event.keyCode==13) event.keyCode=9" 下
form存换行和空格符
一只小小小小菜鸟
11-08 1600
1,form构建出的字段输入框用富文本$form-&gt;editor($column[, $label]);  2,如果$form-&gt;editor($column[, $label]);不起作用,参考http://laravel-admin.org/docs/#/zh/model-form-field-management?id=%E6%89%A9%E5%B1%95%E8%87%AA%E...
el-form-item 标签不换行
最新发布
08-16
### 回答1： 可以在 el-form-item 上添加样式 "white-space: nowrap" 来让 el-form-item 不换行。 例如： ``` <el-form-item style="white-space: nowrap"> <!-- form item content --> </el-form-item> ``` 也可以通过添加自定义类名并在样式表中设置样式来实现。 例如： ```css .no-wrap { white-space: nowrap; } ``` ``` <el-form-item class="no-wrap"> <!-- form item content --> </el-form-item> ``` 注意：这样做可能会导致文本溢出 el-form-item 的宽度，因此可能需要调整 el-form-item 的宽度或设置文本的 "overflow: hidden" 来隐藏文本的溢出部分。 ### 回答2： el-form-item标签是element-ui组件库中的一个表单项标签，用于在表单中显示表单控件和其对应的的表单项名称。el-form-item标签的默认行为是自动换行，即每个el-form-item标签会占据一行。如果需要让el-form-item标签不换行，可以通过以下两种方式实现。 第一种方式是通过CSS样式来控制。可以给el-form-item标签添加一个样式类，并设置该样式类的display属性为"inline-block"或者"inline"，这样el-form-item标签就会在同一行显示，而不会换行。 第二种方式是通过el-row和el-col组合使用。el-row标签是element-ui提供的用于创建行布局的标签，el-col标签是用于创建列布局的标签。我们可以将多个el-form-item标签放置在同一个el-row标签中，并设置el-col标签的span属性为适当的值，这样el-form-item标签就会按照设置的列数在同一行显示，而不会换行。 综上所述，我们可以通过CSS样式或者使用el-row和el-col组件来控制el-form-item标签不换行。希望以上解答对您有所帮助。 ### 回答3： 在el-form-item标签中，默认情况下元素是换行显示的。如果想要实现不换行显示的效果，可以通过以下方式实现。 一种方法是给el-form-item标签添加样式`display:inline-block;`，这样可以使元素在同一行内水平排列，不换行显示。 另一种方法是使用flex布局，给el-form标签添加样式`display:flex;`，这样可以使其中的表单项在同一行内水平排列，不换行显示。 例如： ``` <el-form :model="formData" label-width="80px" style="display:flex;"> <el-form-item label="姓名" style="display:inline-block;"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" style="display:inline-block;"> <el-input v-model="formData.age"></el-input> </el-form-item> <el-form-item label="性别" style="display:inline-block;"> <el-radio-group v-model="formData.gender"> <el-radio label="男">男</el-radio> <el-radio label="女">女</el-radio> </el-radio-group> </el-form-item> </el-form> ``` 通过以上两种方式，就可以实现el-form-item标签不换行显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值