<div>
<input type="text" style="border:1px solid #d1d1d1;display:inline-block"/>
<div style="width:35px;height:35px;background:black;display:inline-block"></div>
</div>
这里的input相比div明显要下来一点
1、为什么会出现这种情况?2、应该怎么解决?(input和div的高度都是35px,我想让他们对齐)
1.input是一个行内替换元素,行内元素其默认的对其方式为baseline
2.div是一个块级别元素,默认的display属性值为block
3.设置div的display属性值为inline-block,那么这个元素将以行内元素的方式显示,将和其左右兄弟行内元素节点或display:inline-block的块级元素显示在一行中
4.display:inline-block的块级元素的baseline的位置为div元素的底部外边距
5.input元素的baseline为其中文字的baseline而不是整个input元素的baseline,和display:inline-block的div元素以baseline的方式在垂直方向上对齐
下面的截图能说明以上的问题:
<div style="background-color: red;">
<input type="text" style="border: 30px solid #d1d1d1;display:inline-block;">
<div style="width:35px;height:35px;background:black;display:inline-block;margin:10px;"></div>
</div>
想让他们对齐
方法1:(我使用的是这个方法)
<div style="background-color: red;">
<input type="text" style="border: 30px solid #d1d1d1;display:inline-block;vertical-align:middle;">
<div style="width:35px;height:35px;background:black;display:inline-block;margin:10px;vertical-align:middle;"></div>
</div>
方法2:
<div style="background-color: red; display: flex;justify-content: flex-start;align-items: center;">
<input type="text" style="border: 30px solid #d1d1d1;">
<div style="width:35px;height:35px;background:black;"></div>
</div>
https://segmentfault.com/q/1010000007643948/a-1020000007644943
相关推荐
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...
<div class=col-xs-9 id=search_songs_a> ...input type=text name=info[gqq_name] id=gqq_name style=width:200px;/> 演奏者: <td><input type=text name=info[gqq_player] id=gqq_player style=width:200px;/
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍,有需求的朋友可以参考
input name="" type="text" class="yd_input"/><font class="l" name="" type="text" class="yd_input" /> <li><input name="" type="checkbox" id='s1-1-2' value="1-1-2" class="yd_dx"/>担保费范围 ...
及格分数</label> <input type="text" id="PassScore" mstype="1" msg="及格分数" fmt="float"> 分 </div> * 解释:input id 为必有项, mstype="1":标识该输入框为需要校验 msg="及格分数" msg:标识...
例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> <link rel=stylesheet ...
解决layui时间控件清空之后无法正常使用的问题,以及...input type=text name=start_time class=layui-input id=start_time placeholder=开始时间(修改时间)> </div> </div> <div class=layui-inline> <div
前言 最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后...input type=text v-on:textInput=fn> </div> [removed][removed] [removed] new Vue({ el:'#wrap', methods:{
1.input标签独占一行,与button标签无法同行显示 (使用position属性进行...(如果想让几个input同行,就把他们放在一个大的div里,大的div的class为layui-input-item,然后设置每个包含input的div的属性为layui-inlin
<div class="edit" style="display: none"> <div class="edit-bg"></div> <div class="edit-center"></div> <div class="edit-title">图书信息编辑</... <p><span>图书名称:</span><input type="text
jjquery动态创建div与input</title> [removed][removed] [removed] <!--动态创建div--> $(function (){ $("<div>",{ id:'text', text:'this is a test', "class":"text", click:function(){ $(this)....
// inputname 会为你生成input :text;设置input id 默认div id; // starnum 星星的个数;默认五个; // startnum 星星初始化个数,初始化后,不可更改;(op 设置 true ;) // textTure 星星数默认五颗;开启文本...
input type=text v-model=items.text ref=count/> <div v-html=number></div> /div> new Vue({ el: '#app', data: { number: '100', items: { text:'', }, }, watch:{ //watch()监听某个值(双向绑定)...
<div> ... <div> <input type="text" v-model.trim="name" placeholder="请输入用户名" ... <input type="text" v-model="code" placeholder="请输入验证码" autocomplete="off" /> </div> <div @click="getCa
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width:200px;"> </div> </div> <div class="layui-form-item"> 验证...
兼容ios ,html5,包含(input,textarea,div,text实例)
织梦按栏目搜索代码,点击选择当前,css+div
Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 ... <div class=completion-input-box> <span class=input-box-name>{{text}} <input type=text ref=input :value=value @input=$emit('input', $
<input t-on-input="_updateInputValue" /> <span t-esc="state.text" /> </div> ``` 这行得通。但是,这需要一些管道代码。此外,如果您需要与复选框、单选按钮或选择标签进行交互,则管道代码略有不同。 为了...