如何实现如下的效果

Question

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

左边固定宽度右边自适应，看起来好简单的是不是。但，我还是遇到坑了。。。
（为保证代码简洁，以下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，以上几点问题，任何一条有人能解决，感激不尽！

Answer 1

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

Answer 2

试试a绝对定位，b宽度100%；

#a{background-color:red; position:absolute; width:43px;}
#b{background-color:blue; width:100%; text-indent:43px;/*paddidng-left也可以*/box-sizing: border-box;}

如果b要加边框和padding，记得加box-sizing: border-box;，不然会多一点点边框的宽度，会出现滚动条。这个属性IE8是支持的。

Answer 3

自己已经解决了，列出来的第三个问题，把负的外边距给左边的元素就行了。

Answer 4

可以尝试下使用下弹性盒子模型

Answer 5

可以使用margin-left+浮动；父级不用清浮动来使用，以上的效果。，、

Answer 6

浏览器版本允许的情况下可以使用flex布局
div{display: flex;justify-content:flext-start;}

a{height: 34px;width: 43px;}

b{height:34px;}

Answer 7

bootstrap的输入框组，可以参考下

Answer 8

第四条,你可以在绝对定位的父元素中添加一个div,宽高设成100%,充满父元素,给他设置溢出隐藏

Answer 9

为什么不用flex布局，难道除了兼容性还有其他缺点嘛

Answer 10

需要注意的是当元素设置绝对定位的时候，当前元素会变成块元素（我没记错的话是这样）

Answer 11

bootstrap的输入框里面有个addon的class,具体就是做再输入框前面或者后面加上单位，div中的input-group是table布局
input-group {

position: relative;
display: table;
border-collapse: separate;

}

Answer 12

左边设置宽度，浮动。右边只要设置margin就可以了。！！！千万不要设置宽度为100%！
原因很简单：只设置margin，块元素自动填充剩余空间。但是你设置100%的话，它是按照父级元素的宽度来计算的100%，也就是整个宽度。所以正确的代码应该是:

HTML：

    <div class="box cf">
        <div class="left"></div>
        <div class="right"></div>
    </div>

CSS：

    /* 清除浮动 */
    
    cf::after {
        content: "";
        display: block;
        height: 0px;
        clear: both;
    }
    /* 父级元素 */
    
    .box {
        width: 300px;
        height: 100px;
    }
    /* 左侧固定区 */
    
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: #de5555;
    }
    /* 右边是自适应区 */
    
    .right {
        /* 只设置margin就可以，不能设置宽度 */
        margin-left: 100px;
        height: 100px;
        background-color: #de5;
    }

Answer 13

我平时是这么处理的，注意兼容性

// 让外层flex布局
#a {
    height: 40px;
    width: 40px;
}
#b {
    flex: 1;
}