开发者

Reset a block element's width

开发者 https://www.devze.com 2023-03-26 14:22 出处:网络
I have a problem using a given CSS file I don\'t want to change. In this file there is a format for inputs:

I have a problem using a given CSS file I don't want to change. In this file there is a format for inputs:

input {
  display:inline-block;
  width:60%;
}

Now I want to use an additional CSS file and change this formatting to a normal block element width full width:

input {
  display:block 开发者_开发技巧!important;
  width:auto !important;
}

Unfortunately, this doesn't work. Unlike normal block elements, the input does not take all the available horizontal space with this setting. It is only as long as it would be as inline element. Additionally, I cannot use width:100%; due to padding, borders and margin. In my desperation I already tried something like width:none;, but I couldn't find a way to reset the width to a block element's default value.

I really hope that somebody can help me. Thank you in advance.


You must use width: 100%, so my answer shows how to fix the problems you're having with it.

https://developer.mozilla.org/en/CSS/box-sizing

input {
    width: 100%;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

If margin is required, then wrap the input in another element and apply the margin to that.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号