一行内的多行文本(input右侧的一行或多行文本)

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

样式
在这里插入图片描述

方法一 : flex

整体flex布局，解释说明文字也是flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .form {
            width: 550px;
            border: 1px solid #ccc;
            padding: 10px 20px;
        }
        
        .line-box {
            display: flex;
            margin-bottom: 10px;
        }
        
        label {
            width: 80px;
            text-align: right;
        }
        
        input {
            width: 200px;
            height: 20px;
            margin-left: 5px;
        }
        
        .tips {
            flex: 1;
            margin-left: 5px;
            font-size: 12px;
            line-height: 20px;
            /*若略小于input行高,写上下面三行代码,单行文本时,会垂直居中;若等于input行高,可不写 (这里26px 有浏览器样式)*/
            display: flex;
            justify-content: space-around;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div class="form">
        <div class="line-box">
            <label for="name">name</label>
            <input type="text" id="name">
            <div class="tips">
                解释说明文字解释说明文字
            </div>
        </div>
        <div class="line-box">
            <label for="age">age</label>
            <input type="text" id="age">
            <div class="tips">
                解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字
            </div>
        </div>
        <div class="line-box">
            <label for="class">class</label>
            <input type="text" id="class">
            <div class="tips">
                解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字
            </div>
        </div>
    </div>
</body>

</html>

方法二 : float : left

label , input float:left;
tips margin-left

 .form {
     width: 550px;
     border: 1px solid #ccc;
     padding: 10px 20px;
 }
 
 .line-box {
     margin-bottom: 10px;
     overflow: hidden;
     /*清除浮动*/
 }
 
 label {
     width: 80px;
     text-align: right;
     float: left;
 }
 
 input {
     width: 200px;
     height: 20px;
     margin-left: 5px;
     float: left;
 }
 
 .tips {
     font-size: 12px;
     margin-left: 295px;
     /*需计算label,input所占宽度*/
     line-height: 20px;
 }

在这里插入图片描述
在这里插入图片描述
第一个图:line-height:20px;时,单行文字时,垂直方向不居中;
第二个图:line-height:26px;时,多行文字时,行距过大,
所以,在.tips上修改line-height: 20px;margin-top:3px,与首图样式一致;

方法三 : table

table table-cell

.form {
     width: 550px;
     border: 1px solid #ccc;
     padding: 10px 20px;
 }
 
 .line-box {
     margin-bottom: 10px;
     display: table;
 }
 
 label {
     width: 80px;
     text-align: right;
     display: table-cell;
 }
 
 input {
     width: 200px;
     height: 20px;
     margin-left: 5px;
     display: table-cell;
 }
 
 .tips {
     font-size: 12px;
     padding-left: 5px;
     /*不能设置margin-left*/
     display: table-cell;
 }

element-ui (同上述三种方法)

flex

在这里插入图片描述

<el-form ref="form" :model="form" label-width="80px" class="form">
      <el-form-item label="name">
        <div class="line">
          <el-input v-model="form.name" class="input"></el-input>
          <div class="tips">解释说明文字解释说明文字</div>
        </div>
      </el-form-item>
      <el-form-item label="age">
        <div class="line">
          <el-input v-model="form.age" class="input"></el-input>
          <div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
        </div>
      </el-form-item>
      <el-form-item label="class">
        <div class="line">
          <el-input v-model="form.class" class="input"></el-input>
          <div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
        </div>
      </el-form-item>
    </el-form>
    
<style>
.form {
  width: 700px;
  border: 1px solid #ccc;
  padding: 10px 20px;
}
.line {
  display: flex;
}
.input.el-input {
  width: 210px;
}
.tips {
  line-height: 20px;
  margin-left: 5px;
  flex: 1;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
</style>

float

input float:left
.tips margin-left: input.width

<el-form ref="form" :model="form" label-width="80px" class="form">
      <el-form-item label="name">
        <el-input v-model="form.name" class="input"></el-input>
        <div class="tips">解释说明文字解释说明文字</div>
      </el-form-item>
      <el-form-item label="age">
        <el-input v-model="form.age" class="input"></el-input>
        <div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
      </el-form-item>
      <el-form-item label="class">
        <el-input v-model="form.class" class="input"></el-input>
        <div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
      </el-form-item>
    </el-form>
    
<style>
.form {
  width: 700px;
  border: 1px solid #ccc;
  padding: 10px 20px;
}
.input.el-input {
  width: 210px;
  float: left;
}
.tips {
  margin-left: 215px;
  line-height: 20px;
  margin-top:10px;/*需计算*/
}
</style>

table

table table-cell

<el-form ref="form" :model="form" label-width="80px" class="form">
      <el-form-item label="name">
        <div class="line">
          <el-input v-model="form.name" class="input"></el-input>
          <div class="tips">解释说明文字解释说明文字</div>
        </div>
      </el-form-item>
      <el-form-item label="age">
        <div class="line">
          <el-input v-model="form.age" class="input"></el-input>
          <div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
        </div>
      </el-form-item>
      <el-form-item label="class">
        <div class="line">
          <el-input v-model="form.class" class="input"></el-input>
          <div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
        </div>
      </el-form-item>
    </el-form>
    
<style>
.form {
  width: 700px;
  border: 1px solid #ccc;
  padding: 10px 20px;
}
.line {
  display: table;
}
.input.el-input {
  width: 210px;
  display: table-cell;
}
.tips {
  line-height: 20px;
  padding-left: 5px;
  display: table-cell;
}
</style>

css img布局

欢迎提供其他方法?????????

潇蓝诺依
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
print函数， 数据类型，判断 ，input函数.docx
05-30
而三引号 `'''` 或 `"""` 则用于创建多行字符串，它会保留其中的换行符。 转义字符在Python中用于表示特殊含义，例如 `\n` 表示换行，`\t` 表示制表符。变量是存储数据的容器，通过赋值操作可以改变变量的值。在...
【HTML】input&多行文本
weixin_45532220的博客
06-27 1万+
input实现上传文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input实现文件上传</title> </head> <body> <form action="XXX" method="post" enctype="multipart/form-data"> &
input输入多行文字
weixin_73675558的博客
08-17 1641
如果你想输入多行文字，并在每次复制粘贴后保存，可以使用一个循环来实现。那input输入多行文字。第二复制粘贴进input。
关于el-input的多行文本框textarea固定多行不可拖拽
seimeii的博客
06-10 8489
前端 +elementui
element input输入多行内容反显时自动换行
m0_56471534的博客
10-23 1800
组件里输入内容过多时，在页面回显时内容不能够进行换行处理，造成页面显示不美观。当点击编辑按钮对原因进行编辑修改时，弹出编辑弹窗，当在。
B站(云e办)SpringBoot实战练习的Sql文件、前端Vue源码、后端springboot源码
m0_54849806的博客
02-26 1051
B站SpringBoot实战练习的资源 1. Sql下载地址： 2. 前端源码下载地址： 3. 后端源码下载地址 资源来源——网络资源搜索！github开源项目练习！ 1. Sql下载地址： 链接：点击我下载sql文件 提取码：yeb7 2. 前端源码下载地址： 链接：点我下载前端代码 提取码：yeb7 3. 后端源码下载地址 链接：点我下载前端代码 提取码：yeb7 如需在线api文档请联系 qq： 87395809, 表明来意 总结 写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自
HTML标记语言——表单
09-28
表单还涉及到各种元素，如`<input>`（文本输入、密码、电子邮件等）、`<textarea>`（多行文本输入）、`<select>`（下拉菜单）、`<option>`（下拉选项）、`<checkbox>`（复选框）和`<radio>`（单选按钮）。...
Python电子教案2-1Python程序实例解析ppt课件.ppt
11-15
缩进指每一行代码开始前的空白区域，用来表示代码之间的包含和层次关系。 缩进是Python语言中表明程序框架的唯一手段。注释是程序员在代码中加入的说明信息，不被计算机执行。注释的两种方法是单行注释和多行注释。...
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
12-19
8. **nl2br()**: 在字符串中的每个换行符(\n)前插入 ` `，方便在HTML中显示多行文本。 9. **htmlspecialchars()**: 避免HTML标签被浏览器解析，将特殊字符转换为HTML实体。例如，"<b>hello world</b>" 会变成 ...
正则表达式
12-03
^ 匹配一个输入或一行的开头，/^a/匹配"an A"，而不匹配"An a" $ 匹配一个输入或一行的结尾，/a$/匹配"An a"，而不匹配"an A" * 匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa + 匹配前面元字符1次或多次，/ba...
针对element使用出现的问题
m0_65638748的博客
08-25 1094
el-input多行文本输入框 禁止拉伸、不给el-form设置一行展示多个，个别表单元素实现一行多个展示
input表单如何制作多行文本输入框？一篇文章教你学会使用input标签
web前端入门基础进阶教程-htmlcssjs
06-09 8688
本篇文章主要的为大家讲述了HTMLinput标签如何制作一个登陆界面的介绍，有文本框、密码框、单选框、多选框、提交和重置按钮的使用说明，完全的解释了HTML表单input标签的使用详情了。现在让我们来看看这篇文章吧 一、首先我们来看看如何制作文本框： <form action="url地址" method=“get/post” name="表单名称"> <p>这是文本框</p> 用户名：<input type="text" name="username">
Element el-input 输入框详解
热门推荐
程序员大阳
02-02 7万+
1. 用途 输入框是使用非常多的元素，用来输入用户名、密码等等信息。Element提供了功能和样式丰富的输入框，本篇就来了解下。 2. 输入框 输入框为el-input，其编译后生成的HTML元素为input，样式class中包含el-input，所以我们首先设定下统一样式，便于演示。 .el-input { width: 200px; } 2.1 输入框基本功能 输入框可以与js变量双向绑定，代码为： 输入框基本功能：双向绑定 <el-input v-model="input1
vue+elementui el-input多行输入 反显换行
weixin_43931918的博客
08-18 6467
el-input 代码块 <el-form-item label="版本信息" prop="ChangeContent"> <el-input v-model="internalFormData.ChangeContent" placeholder="请输入版本信息" clearable :autosize="{ minRows: 10, maxRows: 20}" maxlength="1000
el-input 动态添加class行内样式的一些坑
weixin_40565812的博客
07-29 2742
el-input 动态添加行内样式 el-input 小坑
修改 el-input 内部样式
最新发布
从此选择诗和远方，便不再会犹豫彷徨
12-07 1578
修改 el-input 组件内部样式
VUE+element Input框 实现输入内容可自适应文本高度，换行（空格换行，enter发送）阻止文本域的回车事件
蓝胖子的博客
07-19 5790
VUE+element Input框 实现输入内容可自适应文本高度（空格换行，enter发送）阻止文本域的回车事件
el-input内容过多时展示不下
weixin_43866250的博客
08-30 4262
在上述示例中，我们在 el-input 组件上设置了 type=“textarea” 来使用多行文本框，然后通过 :autosize 属性设置了最小行数（minRows）和最大行数（maxRows），以控制输入框的高度。这样，在鼠标悬浮在 el-input 组件上时，浏览器会显示一个浮动的文本提示框，并将 inputValue 的值作为提示框中的内容显示出来。当 el-input 组件的内容过多时，可以通过设置 el-input 的样式或者使用 el-input 的属性来解决展示不下的问题。
写一个多行文本输入框获取第一行文字
06-07
...<textarea id="input" rows="3"> ()">获取第一行 ``` JavaScript代码： ...这段代码会创建一个多行文本输入框和一个按钮，当用户在文本框中输入多行文字后，点击按钮就会弹出一个提示框，显示第一行文字。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值