为什么不在边界框元素上工作？ [英] why doesn't border-box work on inline-block element?

问题描述

演示： http://jsfiddle.net/L5jchnpm/

我遇到了问题，我的印象是 display：inline-block 使元素表现为嵌入和块元素。

和 box-sizing：border-box ，使得块元素的宽度可以补偿边界的宽度，但是这似乎不是例如 inline-block 。

边框宽度不包括在内。

$

code

这是一个解决方法，以及任何这样的原因。 pre> < UL>
< li>主页< / li>
< li>关于< / li>
< li>正常工作< / li>
< li>投资组合< / li>
< li>联络人< / li>
< / ul>


css

  ul {
 overflow：auto; 
} 
 li {
 display：inline-block; 
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
 padding：10px; 
 border：1px solid; 
 
} 
 
 li：hover {
 border：5px solid; 
 
  

解决方案

而不是边框​​，为 li CSS设置一个 margin 值，这样当您将鼠标悬停时，他们，像这样小提琴：

  li {
 outline：1px solid; 
 margin：5px; 
} 
 li：hover {
 outline：5px solid; 
} 
  

Demo: http://jsfiddle.net/L5jchnpm/

I have ran into problem, i was under impression that display: inline-block makes elements behave as inline and block elements.

And that box-sizing: border-box, makes block elements width to compensate for border's width however this doesn't seem to be the case for inline-block.

border width is simply not included.

What is a workaround for this, and any reason why it's like this.

code

<ul>
    <li>home</li>
    <li>about</li>
    <li>work</li>
    <li>portfolio</li>
    <li>contact</li>
</ul>

css

ul {
    overflow: auto;
}
li {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid;

}

li:hover {
    border: 5px solid;
}

解决方案

The work around: use outline instead of border, set a margin value to the li CSS so that they won't react weird when you hover over them, something like this Fiddle:

li{
    outline: 1px solid;
    margin: 5px;
  }
li:hover {
    outline: 5px solid;
}

这篇关于为什么不在边界框元素上工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！