Question

我有以下示例代码，并注意到如果我尝试在div元素display:inline-block上使用声明content，它不会将其后代或子项并排放置。

让p元素彼此相邻的唯一方法是将样式应用于p选择器。这是否意味着我不能对后代，孩子和兄弟姐妹使用display: inline-block？

代码

<DOCTYPE public HTML "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset="UTF-8" />
        <meta http=equiv="content-language" content="en-us" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="copyright" content="&copy; 2012" />
        <title>Inline-block</title>

        <base href="" />
        <link rel="stylesheet" href="" />

        <style type="text/css" media="all">

        p {
            display: inline-block;
            width: 100px;
        }

        </style>
    </head>

    <body>
        <div id="content">
            <p>paragraph 1</p>
            <p>paragraph 2</p>
        </div>
    </body>
</html>

Answer 1

内联块应该适用于兄弟姐妹，但不适用于儿童。尝试这样的事情：

#content p {
   display: inline-block;
}

Answer 2

您需要在要以此方式显示的元素上设置属性。子项不会继承display属性。另外需要注意的是，IE7只接受默认情况下内联元素的inline-block。

为什么我无法在div标签上使用内联块？

2 个答案: