如何实现如下的效果

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

图片描述

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

回复
阅读 5.4k
13 个回答

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

试试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是支持的。

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

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

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

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

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

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

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

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

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

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

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

}

左边设置宽度,浮动。右边只要设置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;
    }
新手上路,请多包涵

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

// 让外层flex布局
#a {
    height: 40px;
    width: 40px;
}
#b {
    flex: 1;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏