0

我有以下示例代码，并注意到如果我尝试display:inline-block在 div 元素上使用声明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>
4

2 回答 2

1

inline-block 应该适用于兄弟姐妹，但不适用于孩子。尝试这样的事情：

#content p {
   display: inline-block;
}
于 2012-06-11T20:56:30.183 回答
1

您需要在要以这种方式显示的元素上设置属性。display财产不由子女继承。还应该注意的是，IE7 只接受inline-block默认内联的元素。

于 2012-06-11T20:57:07.997 回答