php - 如何实现如下的效果

问题描述

问 题

我原本是想实现这种输入框效果

左边固定宽度右边自适应，看起来好简单的是不是。但，我还是遇到坑了。。。
（为保证代码简洁，以下demo均用红蓝框演示）

刚开始我用的方法是左边float，用两个div模拟，代码如下

<div>
    <div id="a"></div>
    <div id="b"></div>
</div>

*{margin:0; padding:0; border:0;}
#a,#b{height:34px;}
/*以上两行后面将省略*/
#a{background-color:red; float:left; width:43px;}
#b{background-color:blue; width:100%;}

效果堪称完美啊

但是当我把两个div分别换成lable和input的时候

<div>
    <label id="a"></label>
    <input type="text" id="b">
</div>

问题出现了

如图所示，蓝色的块直接掉下来了
也就是说，蓝色的元素有清除浮动效果，但是浏览器显示clear:none。
后来发现，只要后面的元素是inline-block就会出现这样的问题，但是加上负数的margin就可以解决

<div>
    <div id="a"></div>
    <div id="b"></div>
</div>

#a{background-color:red; float:left; width:43px;}
#b{background-color:blue; width:100%; display:inline-block; margin-left:-43px;}

但是，新的问题又出现了

蓝色input把红色部分遮盖住了（我把蓝色设置透明的时候就能看见红色，所以说是遮住了）
然后，我把dispaly换成block，蓝色元素用div一切正常，使用input依然会出现蓝色独占一行

无奈啊。。。
最后，我把左边的浮动换成了绝对定位

<div>
    <label id="a"></label>
    <input type="text" id="b">
</div>

#a{background-color:red; position:absolute; width:43px;}
#b{background-color:blue; width:100%; margin-left:-43px;}

效果堪称完美啊，但是美中不足的是，绝对定位的红色框，无论父元素是否overflow:hidden，溢出时都不会隐藏。平常使用没什么，但是做动画的时候中间会溢出零点几秒，真的是丑爆了啊.

额。。好像说的有点乱，大概整理一下

1. 使用inline-block元素时，会出现类似清除浮动效果，忽略前面元素的浮动自己独占一行

2. 使用inline-block元素时，和附近的元素设置负的外边距会将附近的元素遮盖

3. 给input标签设置display:block时，无论附近元素是否浮动、元素间边距是否为负，input都要独占一行

4. 绝对定位元素溢出父元素时，溢出部分无法隐藏

我用的firefox，以上几点问题，任何一条有人能解决，感激不尽！

解决方案

这个问题可以使用左边是float 右面是block，但是需要注意是右面需要转化为BFC，具体啥是BFC 我有个笔记，你可以参考下CSS中的BFC

这篇关于php - 如何实现如下的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！