19

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

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

これがアイデアです。

私はオンラインショップを作っていますが、異なるIDを使用してすべての画像、テキスト、リンクを配置することは避けたいと思います。

私はこのアイデアを思いつきました。liをdiv内に配置して、リスト内のすべてがこのボックス内に収まるようにし、テキスト、リンク、画像を適切に配置するクラスを作成し、display：inlineなどを使用します。クラスのみを使用して製品のページ全体を作成します。

問題は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>
4

5 に答える 5

33

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

于 2012-08-15T03:35:43.793 に答える
4

それが機能しない理由は、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;。

于 2012-08-15T03:37:18.957 に答える
2

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

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

動作しないでしょう。

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

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

うまくいかない。

于 2016-11-04T17:25:51.080 に答える
0

インライン要素は高さと幅を受け入れません。無視します。したがって、cssに入力した高さと幅は無視されます。そのため、空のdivは表示されません。さらに、インラインブロックを使用してみてください。問題は解決します。

于 2021-04-18T00:49:01.463 に答える
0

使用する

 display:flex;

それは私のために働いた

于 2021-07-03T15:45:41.480 に答える