两个input均分自适应
最近项目中,做到了表格类似的表单
左边是标题,右边是输入框,由于种种和项目相关原因,我们采取了div布局
div
label
input*2
div里面有1个input,有的时候,遇到日期,会有2个input,为了美观,左右对齐,自适应
采取了flex布局,这里的坑是,input有最小值,开始给input设置width:50%,在谷歌浏览器可以缩放正常,2个input等比例缩放
但是在火狐浏览器,一直会突出去,input最小值
尝试许久,以为是 box flex在浏览器兼容性 的问题
最后,火狐浏览器下,缩放发现input一直不动,遂给input设置min-width:0px;方可解决
======================================================
<div>
<label>备注</label>
<p>
<input type="text">至
<input type="text">
</p>
</div>
==================================================
/*css reset*/
.test-textarea {
float:right; /* new */
width: 400px;
min-height: 30px;
_height: 30px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
-webkit-user-modify: read-write-plaintext-only;
}
@charset "utf-8";
.box{
width: 80%;
height: 60%;
border: 1px #000 solid;
margin: 10px auto;
}
.box div{
position: relative;
float: left;
min-height: 40px;
line-height: 40px;
width: 50%;
background-color: #fff;
border-bottom: 1px #e9e9e9 solid;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-right: 14px;
box-sizing: border-box;
}
.box div label{
padding: 0px 10px 0px 0px;
line-height: 40px;
width: 143px;
text-align: left;
display: inline-block;
text-indent: 20px;
vertical-align: top;
background: #F8F8F8;
border-right: 1px #e9e9e9 solid;
border-left: 1px #e9e9e9 solid;
font-family: 'MicrosoftYaHei', 'PingFang SC';
font-size: 12px;
color: #333333;
letter-spacing: 2px;
padding-bottom: 1000px;
margin-bottom: -1000px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.box div>input{
float: none;
/* width: 230px; */
height: 25px;
border: 1px #DEDEDE solid;
padding: 0;
line-height: normal;
box-shadow: inset 0 1px 2px 0 rgba(176, 174, 174, 0.50);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding-left: 8px;
box-sizing: border-box;
color: #929292;
font-family: 'MicrosoftYaHei', 'PingFang SC';
font-size: 12px;
letter-spacing: 2px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
margin-left: 14px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 7px;
}
.box div p{
width: calc(100% - 143px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.box div p input{
width:50%;
min-width:0px;
margin-left: 14px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 7px;
height: 25px;
border: 1px #DEDEDE solid;
padding: 0;
line-height: normal;
box-shadow: inset 0 1px 2px 0 rgba(176, 174, 174, 0.50);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding-left: 8px;
box-sizing: border-box;
color: #929292;
font-family: 'MicrosoftYaHei', 'PingFang SC';
font-size: 12px;
letter-spacing: 2px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
===================================================
下载地址链接:https://files.cnblogs.com/files/leshao/%E4%B8%A4%E4%B8%AAinput%E5%9D%87%E5%88%86%E8%87%AA%E9%80%82%E5%BA%94.rar
感谢一棵树、大侠指点,得以完成
两个input均分自适应的更多相关文章
- 看起来像一个输入框的input,实际上是有两个input
看起来像一个输入框的input,实际上是有两个input
- 两个input在同一行连着不留缝隙
方法1:让两个input 连在一起写 不换行 <div class="inputDiv"> <input type="text" placeh ...
- 微信小程序-两个input叠加,多次点击字体变粗或闪动
问题描述: 当两个input叠加,多次点击input框, placeholder 字体变粗或input框闪动.如图: 代码: <!-- 最上层input-1 --> <input p ...
- 两个input在一行让它们能对齐
input明明写在同一行,高度也一样,在不同的浏览器或者手机上显示却不一样,经常会出现这样的情况 <input type="text" name="verify&q ...
- HTML问题 | 两个Input在同一行连着不留缝隙
方法1:让两个 input 连在一起写 不换行 <div class="inputDiv"> <input type="text" place ...
- 【iview input 回车刷页面bug】input 就一个的时候 有form的时候 回车会刷页面,如果就一个input,可以不要form,或者form里面两个input 将一个input v-show false 就可以了
[iview input 回车刷页面bug]input 就一个的时候 有form的时候 回车会刷页面,如果就一个input,可以不要form,或者form里面两个input 将一个input v-sh ...
- 在reset css后两个input之间还是出现默认间隔的问题。
<div class="search_box fl"> <input type="text" class="search_text& ...
- react中IOS手机里面两个input同时存在时,聚焦focus失效解决办法
最近在做webapp搜索功能时,用到两个input同时存在时,轻点input聚焦时,ios手机软键盘弹起又失效,一直在寻找合理的解决办法,现在最简单的总结回顾: <一>bug显示 < ...
- 小实例---关于input宽度自适应以及多个input框合并拆分
前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...
随机推荐
- Android测试:Fundamentals of Testing
原文地址:https://developer.android.com/training/testing/fundamentals.html 用户在不同的级别上与你的应用产生交互.从按下按钮到将信息下载 ...
- python模块 - re模块使用演示样例
http://blog.csdn.net/pipisorry/article/details/46619179 re模块匹配规则见:http://blog.csdn.net/pipisorry/art ...
- 卡尔曼滤波(Kalman Filter)
一.引言 以下我们引用文献[1]中的一段话作为本文的開始: 想象你在黄昏时分看着一仅仅小鸟飞行穿过浓密的丛林.你仅仅能隐隐约约.断断续续地瞥见小鸟运动的闪现.你试图努力地猜測小鸟在哪里以及下一时刻它会 ...
- C语言可变參函数的实现
1 C语言中函数调用的原理 函数是大多数编程语言都实现的编程要素.调用函数的实现原理就是:运行跳转+參数传递.对于运行跳转,全部的CPU都直接提供跳转指令:对于參数传递,CPU会提供多种方式.最常见的 ...
- Flex/AS3 base64指定字符编码
public static function base64Encode(str:String, charset:String = "GBK"):String{ if(StringU ...
- ABP入门系列(21)——切换MySQL数据库
ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1. 引言 Abp支持MySql已经不是什么新鲜事了,但按照官方文档:Entity Framewo ...
- mysql 常用sql语句 二
mysql 查询 基本查询 select * from users; 去重 select distinct(name),high from users order by high desc; ## 注 ...
- 「mysql优化专题」你们要的多表查询优化来啦!请查收(4)
一.多表查询连接的选择: 相信这内连接,左连接什么的大家都比较熟悉了,当然还有左外连接什么的,基本用不上我就不贴出来了.这图只是让大家回忆一下,各种连接查询. 然后要告诉大家的是,需要根据查询的情况, ...
- 《深入浅出Netty》【PDF】下载
<深入浅出Netty>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062563 内容简介 本文档主要讲述的是深入浅出Netty: ...
- git的merge功能
merge功能是将一些分支的内容合并到某一个特定的分支,这里我为了测试下,在阿里云code上面新建了一个项目 现在我需要将dev分支merge到主分支master 开发者和管理员都有权发起merge请 ...