精华内容
下载资源
问答
  • input框和文字对齐问题

    千次阅读 2020-10-26 14:37:06
    input框和文字对齐问题css样式解决!问题产生的条件解决方案以vertical-align:text-bottom为基础的vertical-align:text-topvertical-align:bottomvertical-align:topvertical-align:middle最后的说明 做了好久的前端...

    做了好久的前端,一直没有对行内样式进行详细的了解,总使用vertical-align,缺并不了解其使用特性,偶然看到了一片文章,记录了下来,原文地址

    css样式解决!

    style="vertical-align: text-bottom;margin-bottom: 2px;"
    

    问题产生的条件

    对于14像素大小的字体是没有本篇所要探讨的单(复)选框与文字对齐的问题的。但是,对于12像素大小的文字,则就存在对齐问题了,尤其在Firefox火狐浏览器以及chrome谷歌浏览器下。

    解决方案

    下面我将提供五种解决方案,有三个方案没有使用任何hack,且IE6,IE7,Firefox,chrome浏览器下表现都很好的,有一种方案使用了一个IE hack,但成本较低,各个浏览器表现良好。还有一种方案,代码成本很低,但在chrome浏览器下文字稍微偏上,使用input类型选择器,或chrome hack可以解决这个问题,但是对于单复选框这类控件,代码一多反而不划算,权衡之下,不针对chrome浏览器单独处理。
    这些方案都是我经过平时积累,反复试验得出的结论,其兼容性值得信赖。要使用的话就给单复选框命名一个class,该class样式为下面方案提供的css样式即可。

    以vertical-align:text-bottom为基础的

    css代码如下:

    vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;
    

    css代码如下:

    vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;
    

    vertical-align:text-top

    css代码如下:

    height:13px; vertical-align:text-top; margin-top;
    

    vertical-align:bottom

    css代码如下:

    height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
    

    vertical-align:top

    css代码如下:

    height:14px; vertical-align:top;
    

    vertical-align:middle

    css代码如下:

    vertical-align:middle; margin-top:-2px; margin-bottom:1px;
    

    最后的说明

    未显示在opera浏览器下测试的结果,原因一是opera市场份额奇怪的小,即使不管它也影响不大;二是减轻自己的截图,对比处理的工作量。这里就直接用文字表述在opera浏览器下的表现吧。opera是个怪胎,应该来说,它对标准的支持应该是很好的,但是14像素的文字和单选框复选框却是不对齐的,当然,12像素更不用说了。但是,在方案3和方案5下的表现却是意外的好,所以方案3和方案5是不错的方案。

    IE8浏览器下未测试,不是不想测,而是现在手头上就一台电脑,IE8由于系统原因,测不了,抱歉。
    以上方案不一定是最优的方法,我没有加入padding进行测试,还有其他一些属性,只要有时间,将各类组合一个一个的试验,可能会找到另外的方法。
    Firefox浏览器和chrome浏览器下的单选框和复选框默认是由一个margin值的。其两者的值大小近乎一致,拿chrome浏览器举例。在chrome谷歌浏览器下,radio单选框的默认margin值是:margin:3px 3px 0 5px;checkbox复选框的margin值为margin:3px 3px 3px 4px;而IE浏览器下似乎没有margin值,但是对margin敏感。这是不用hack解决对齐问题的难点之一。
    最后,说句结论性的话,方案3和方案5从兼容性,代码的利用率,css的消耗等来讲都是我非常推荐的两种方法。建议您试试!

    曾在人人网的css代码中看到使用vertialc-align:-3px解决此问题,我试过,虽然表现不能用完美形容,但确实缓解了对齐的问题,是个性价比非常高的方法。我是建议您试试的。

    展开全文
  • input元素与文字对齐

    千次阅读 2018-04-14 17:38:00
    示例代码&....inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> <input class="inputcheckbox" name="test" v...
    示例代码
    <style>
    *{margin:0;}
    label{vertical-align:middle}
    .inputcheckbox{vertical-align:middle;}
    body{font-family:tahoma;font-size:12px;}
    </style>
    <input class="inputcheckbox" name="test" value="1" type="checkbox">
    <label>测试文字x</label>
    <br/><br/>
    <input class="inputcheckbox " name="test2" value="2" type="radio">
    <label>测试文字x</label>
    <br/><br/>
    <input class="inputcheckbox " name="Text1" type="text" />
    <label>文字</label>
    <input  class="inputcheckbox " name="Text1" type="text" />
    <label>文字</label>
    <br/><br/>
    <label>测试文字</label>
    <input   class="inputcheckbox " name="Button1" type="button" value="按钮" />
    <br/><br/>
    <select class="inputcheckbox " name="Select1">
    <option>测试文字</option>
    </select>
    <label>测试文字</label>
    <input class="inputcheckbox " name="test" value="1" type="checkbox">
    <label>测试文字x</label>
    <br/>
    <input class="inputcheckbox " name="test" value="1" type="checkbox">
    <label>這是繁體中文</label>
    <br/>
    <input class="inputcheckbox " name="test" value="1" type="checkbox">
    <label>次回から自動的にログイン</label>
    <br/>
    <input class="inputcheckbox " name="test" value="1" type="checkbox">
    <label>English</label>
    <br/>
    <input class="inputcheckbox " name="test" value="1" type="checkbox">
    <label>Чужой компьютер</label>
    <br/>
    <input class="inputcheckbox " name="test" value="1" type="checkbox">
    <label>صفحات من ‏السعودية </label>
    <br/>
    <input class="inputcheckbox " name="test" value="1" type="checkbox">
    <label>회원가입</label>
    <br/>
    <input class="inputcheckbox" name="test" value="1" type="checkbox">
    <label>הפתוח</label>
    <br/>
    上述代码涵盖了三个问题:
    1.单(复)选框和后面的提示文字不对齐,提示文字用label,设置vertical-align:middle;单选会下边框缺失,所以要注意初始设置。
    2.IE下文本框默认为22px,如果文本框内要文字居中对齐,需要设置字体为偶数

    3.同理,其他国家的语言也可以实现居中对齐

    参考引用:http://www.blueidea.com/tech/web/2009/6910.asp

    展开全文
  • 在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字。我们只需要在标签里添加:placeholder="提示文字即可",那么如果要修改提示文字的样式呢?可以这样设置css样式...

    在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字。我们只需要在标签里添加:placeholder="提示文字即可",那么如果要修改提示文字的样式呢?可以这样设置css样式:

    input输入框提示文字

    /*修改提示文字的颜色*/

    input::-webkit-input-placeholder { /* WebKit browsers */

    color: red;

    }

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

    color: red;

    }

    input::-moz-placeholder { /* Mozilla Firefox 19+ */

    color: red;

    }

    input:-ms-input-placeholder { /* Internet Explorer 10+ */

    color: red;

    }

    修改后提示文字样式如下:

    c4e45dca9b9409f77c4df76b6b1bd226.png

    input 默认提示文字 样式修改&lpar;颜色&comma;大小&comma;位置&rpar;

    input::-webkit-input-placeholder{ color:red; font-size:20px; ...... }

    input提示文字;placeholder字体修改

    在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字.我们只需要在标签里添加:placeholder="提示文字 ...

    css常用技巧&colon;input提示文字;placeholder字体修改

    1 很多网站都需要更改 内部的placeholder 文字颜色属性:下面来介绍下这个技巧. 2  源代码: ...

    Python入门(一):PTVS写Python程序,调试模式下input&lpar;&rpar;提示文字乱码问题

    前两天写了Python入门(一),里面提到,使用VS2013+PTVS进行Python开发. 就在准备为第二篇写个demo的时候,发现了一个问题,各种解决无果,有些纠结 Python中输入函数是inp ...

    input placeholder属性 样式修改&lpar;颜色&comma;大小&comma;位置&rpar;

    placeholder属性 样式修改

    随机推荐

    express全局安装后无法通过require使用

    今天入门了一下express,首先安装依赖. npm install express -g; npm install body-parser -g; npm install cookie-parser ...

    android onActivityResult无效或先执行或无回传问题

    我的问题属于第一种情况,更改后下确有回传结果. (http://www.cnblogs.com/tt_mc/p/3586834.html) Android Activity的加载模式和onActivi ...

    vim python配置 安装pep8自动检查插件,语法高亮

    pep8 http://www.vim.org/scripts/script.php?script_id=2914 语法高亮 http://www.vim.org/scripts/script.php ...

    discuz二次开发之后导航无法高亮 &dollar;mnid &equals;&equals; &dollar;nav&lbrack;navid&rsqb;解决办法(转)

    前面加入如下代码:body原来就有一个class,直接在增加一个进行测试

    win7下用SSH连接linux虚拟机

    本文来自转载:原文 [需求] 在win7环境下用SSH(SecureShell)连接本地的一台虚拟机上ubuntu(11.10)系统  [环境] win7,ubuntu,vmware(8.0) [方案 ...

    一篇关于PHP性能的文章

    一篇关于PHP性能的文章 昨晚清理浏览器收藏夹网址时,发现了http://www.phpbench.com/,想起来应该是2015年发现的一个比较性能的文章,我就点进去看了看,发现还是全英文耶,刚好最 ...

    &lbrack;React&rsqb; 14 - Redux&colon; Redux Saga

    Ref: Build Real App with React #14: Redux Saga Ref: 聊一聊 redux 异步流之 redux-saga  [入门] Ref: 从redux-thun ...

    FFmpeg命令行工具和批处理脚本进行简单的音视频文件编辑

    FFmpeg_Tutorial FFmpeg工具和sdk库的使用demo 一.使用FFmpeg命令行工具和批处理脚本进行简单的音视频文件编辑 1.基本介绍 对于每一个从事音视频技术开发的工程师,想必没 ...

    展开全文
  • 在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。
  • 就这样一个input输入框,如果输入内容,左边的文字在有些浏览器上会上下动一下,这是浏览器兼容性问题,目测只有ie有这种怪情况。解决方案我也测试出了一种,就是用一个标签把这个input框给包住,这样就解决了这种...
    请输入要聊天的话题:<input type="text" id="text"/>
    就这样一个input输入框,如果输入内容,左边的文字在有些浏览器上会上下动一下,这是浏览器兼容性问题,目测只有ie有这种怪情况。
    解决方案我也测试出了一种,就是用一个标签把这个input框给包住,这样就解决了这种问题。
    请输入要聊天的话题:<div><input type="text" /></div>

    展开全文
  • HTML input 文本框添加提示文字的方法

    千次阅读 2019-10-30 11:34:59
    周未休息,感觉没啥可写的,就水一篇文章吧,说一说前端 html 页面中 input 元素中在没有值的情况下,添加提示的文字,当要输入文字的时候,提示的文字消失。 关于 html input 输入框的提示文字,有两种方法可以实现...
  • 调整input输入框文字距离

    万次阅读 2018-04-27 14:37:37
    css属性:letter-spacing:10px;根据需求自己进行调整
  • 登录框input 前面增加一个小图标 效果如图: 核心样式: background:url("…/images/slider-pic/yh.png") no-repeat scroll .35rem center transparent ; .35rem: 这个个地方可以调整位置。 可选的值: left right...
  • 场景:希望读取input控件的输入内容之后,清空输入框的内容。由于本人是JS小白,整整花了一两个小时都没找到方法。原来微信小程序不支持document通过id获取控件的方法,尽管编译不报错,但是实际是不起作用的,本人...
  • 点击按钮文字变成input框,点击保存变成文字的实现代码XML/HTML Code复制内容到剪贴板点击按钮文字变成input框,点击保存变成文字table{ text-align: center; font-size: 14px;}table>thead>tr>th{ font-...
  • 在ie浏览器中 jquery 导致存在值得input内得光标始终跳到文字前面 如何解决</p>
  • 若一个 input 框在 td里面,且此时需要在 input 框后面加入一个文字描述,该如何避免input框和添加文字不在同一行的情况。 解决办法 限制 Input 输入框的长度,在 input 中加入 style="width: 55%;"进行...
  • element ui input 标签文字自动换行问题

    千次阅读 2020-04-07 14:58:13
    用element ui 的input组件做搜索输入,前面的标签文字无论几个总要分成两行显示,实在不美观,查看代码也没发现哪里设置了,于是直接使用 white-space:nowrap; 禁止其换行 ...
  • HTML-input文本框(添加提示文字,填写内容时消失)

    万次阅读 多人点赞 2018-01-26 15:00:36
    input文本框内添加提示文字,填写内容时消失: 用placeholder属性作为提示语 <input placeholder="提示语..."></input>
  • input placeholder = '请输入姓名' / > < /div > < div > < span class = "s1" > 身份证号 < /span > < input placeholder = '身份证号' / > < /div > < /body > < /html > 效果:
  • input两种默认显示文字方式

    千次阅读 2017-05-16 11:56:21
    input type="text" name="tname" placeholder="请在这里输入用户名"&gt;2.value属性 规定 input 元素的值,值会被提交如&lt;input type="text" name="tname&...
  • 最终效果如下图 采用input+label标签实现 ...input class="input-style text-in2" value="" v-model="tel" /> 2、css代码 .label { font-size: 19px; font-family: 'SourceHanSansCN-Medium';
  • 在vue中input框得到焦点选中文字

    万次阅读 2018-06-04 14:38:16
    最近项目中有个需求,input框获取焦点时需直接选中文本内容。代码:&lt;el-input v-model="addDialogForm.name" @focus="focus($event)"&gt;&lt;/el-input&gt;//得到焦点选中...
  • input()语法:variable=input(“提示文字”)exp1:tip=input("请输入文字:")print(tip) #输出键盘输入print(type(tip))#输出类型(字符串类型)print(type(int(tip))) #类型转换为整形exp2:根据身高...
  • css-input文字的对齐

    2014-08-13 17:17:00
    目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好。12px大小的文字就是主流也是底线。...
  • 1 <input name="username" placeholder="请输入用户名" /> placeholder = "提示文字" 转载于:https://www.cnblogs.com/DSH-/p/6992138.html
  • input框聚焦到文字后 与 textarea的value值问题
  • 最近碰到了文字无法与input居中对齐的问题,即使设置父容器的style="vertical-align:middle"也不行,后来查了下才知道原来设置input的style="vertical-align:middle"就行了:) 如: [code="...
  • 如何修改html input ...注意:IE下必须要调整默认的按钮位置对到你的文字上,前面显示文件路径的那部分覆盖住提示文字需要双击才能弹出文件选择窗口。自己调整input的font-size属性变换file控件大小,设置margin-l...
  • 限制 Input 输入框的长度,在 input 中加入 style="width: 55%;"进行限制即可。
  • <input/>标签中默认提示文字

    千次阅读 2016-09-26 16:03:13
    在标签中有默认提示文字,当点击时文字消失等交替效果,用到的事件是onfocus和onblur,代码如下:<td width="20%"><input type="text" id="ALIASCN" name="ALIASCN" value="通用名称" onfocus="javascript:if(this....
  • 测试了集中方法,发现不行。只能用专署标签解决这个问题。 <fieldset> <legend>神光咨询后台管理登录</legend> <br /> <label>...input type="text"/><br />...
  • 多语言,input从右往左输入文字实现 (1) 以下的input代码可以解决文字从右侧输入的问题 <input id="cc" class="cc" dir="rtl" autocomplete="off" maxlength="4000" type="text" placeholder="请输入内容...
  • <view class="content">我们可能收集的信息</view> <text class="word" decode="{{true}}"> &nbsp;...我们提供预约服务时,可能会收集、储存和使用下列与个人(以下简称“您”)有关的信息。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,320
精华内容 25,728
关键字:

input前面加文字