Question

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

而box-sizing: border-box使块元素宽度可以补偿边框的宽度，但inline-block似乎并非如此。

边框宽度根本不包括在内。

对此有什么解决方法，以及为什么会这样。

代码

<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;
}

Answer 1

解决方法：使用大纲而不是边框，为margin CSS设置一个li值，这样当你将鼠标悬停在它们上面时它们就不会做出反应，就像这样li{ outline: 1px solid; margin: 5px; } li:hover { outline: 5px solid; } 3}}：

#include <iostream>
#include <string>

namespace test
{
    void function1(void){std::cout << "Function inside the namespace" << std::endl;}

    class test
    {
    public:
        static void function1(void){std::cout << "Function inside the class" << std::endl;}    
    };
};

using namespace test;

int main()
{
    function1();

    test::function1();

    test::test::function1();
}

为什么没有边框工作在内联块元素？

1 个答案: