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プロパティは子に継承されません。inline-blockまた、IE7はデフォルトでインラインの要素のみを受け入れることに注意してください。

于 2012-06-11T20:57:07.997 に答える