web-dev-qa-db-ja.com

ディスプレイ：インラインが機能しない

私はhtmlとcssにかなり慣れていません。

基本といくつかの高度なテクニックを学びましたが、リストに長い間問題があり、どうすれば問題を解決できるか知りたいです。

これがアイデアです。

オンラインショップを作成していますが、画像、テキスト、リンクを1つ1つ、別のIDを使用して配置することは避けたいです。

私はこのアイデアを持っていました、私は私のliをdivの中に入れて、リスト内のすべてがこのボックスの中にスタックし、クラスが私のテキスト、リンク、イメージを適切に配置し、display：inlineとet voilaを使用して、クラスのみを使用して製品のページ全体を作成します。

問題は、display：inlineが機能しないことです。

誰かがこれを手伝ってくれると本当にありがたいです。

これは悪い例ですが、あなたは原理を理解しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    #nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
    .nav_button {background-color:purple;width:100px;height:50px;}
    .nav_button:hover {background-color:pink;}
    .nav_button li {display:inline;} /* Not working ?!? */
    .nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>

<body>
    <table style="width:600px;margin:0 auto;">
        <tr>
            <td>
                <ul id="nav_bar">
                    <div class="nav_button"> <li> <a href="#">Home</a> </li> </div>
                    <div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div>
                    <div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div>
                    <div class="nav_button"> <li> <a href="#">About us</a> </li> </div>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>
htmlcsslistunordered
17
Dany

display:inlineは非常に制限されており、block-levelスタイルを追加することはできません。 display:inline-blockを使用するか、float:leftを使用することをお勧めします。 floatを使用する場合、親要素のオーバーフローをoverflow:autoに設定する必要があることに注意してください（IE <8の場合はvisibleを使用）。これは機能するはずです。inline-最初にブロックします。

31
matsko

これが機能しない理由は、div内で使用していて、そのdiv要素にli要素しかないため、divの下に複数のli要素がある場合、インラインプロパティが機能するためです。

これを試して

<ul id="nav_bar">
    <li class="nav_button"> <a href="#">Home</a> </li>
    <li class="nav_button"> <a href="#">Contact us</a> </li>
    <li class="nav_button"> <a href="#">Shipping</a> </li>
    <li class="nav_button" > <a href="#">About us</a> </li>
 </ul>

そしてCSSのために

#nav_bar .nav_button {display:inline-block;}

または、代わりに次も使用できます。

#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/

floatメソッドを使用する場合は、最後にclear:both;で指定された要素を使用していることを確認してください。

3
Amyth

注意：親要素の幅が短すぎて水平に表示できない場合

ul {
width: 20px;
}
li
{
display: inline;
}

動作しないでしょう。

display：blockがある場合は、li要素の下にもあります。などのステートメント

li
{
display: inline;
}
li a{
display: block;
}

うまくいかない。

1
Emre