米鼠商城

多块好省,买软件就上米鼠网

最新项目

人才服务

靠谱的IT人才垂直招聘平台

宽度:100%填充?

  • lxd01
  • 7
  • 2020-02-14 17:03

我有一个html输入。

输入具有padding: 5px 10px; 我希望它是父div宽度的100%(可变)。

但是使用width: 100%; 导致输入为100% + 20px ,我该如何解决?


#1楼

您可以在不使用box-sizing情况下进行操作,也不必使用诸如width~=99%类的不清楚的解决方案。

jsFiddle上的演示

  • 保持输入的paddingborder
  • 添加到输入的负水平margin = border-width + horizontal padding
  • 添加到输入的包装器水平padding等于上一步中的margin

HTML标记:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

#2楼

你可以这样做:

width: auto;
padding: 20px;

#3楼

假设我在一个15px填充的容器中,这就是我一直用于内部的内容:

width:auto;
right:15px;
left:15px;

这样会将内部部分拉伸到任意宽度,但应小于两侧的15px。

干杯

安迪


#4楼

使用CSS calc()

超级简单又给力。

input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}​

如此处所示: Div宽度100%减去固定像素数 通过webvitaly( https://stackoverflow.com/users/713523/webvitaly ) 原始来源: http : //web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

只是将其复制到了这里,因为我在另一个线程中几乎错过了它。


#5楼

将其包装在容器中怎么样? 容器应具有以下样式:

{
    width:100%;
    border: 10px solid transparent;
}


城市合伙人全球招募中:400-150-9800

参与线下宏伟蓝图,用业绩说话!
软件线索、软件需求,米鼠网帮你变现!
更灵活的合作模式(不限地域、不限金额、不限项目)
更高额的提成比例(提成是软件项目利润的80%)
利润的核算方式:
以平台公开招标的最低价中标价格为基准,剩下的为利润部分,如对平台的最低中标价格有异议,可以推荐供应商进行竞标。
义务:
1、作为城市合伙人,在该城市利用自身优势推广“米鼠网平台”,拓展甲 方所拥有的“米鼠网平台”实名认证用户和 VIP 用户
2、作为城市合伙人,在该城市利用自身优势推广“米鼠网商城”,并寻求该地域软件产品销售商,促成软件产品销售商委托甲方在“米鼠网商城”上代理销售软件产品销售商的软件产品的交易,并拓展软件产品采购用户促成与甲方的采购交易。

猜你喜欢

评论留言