1

display:inlineリストを水平方向に表示するために指定した順序付けられていないリストがありliますが、水平方向に表示することはできません。これが私のコードです：

ul li{
min-height:310px;
background:#FFF;
width:330px;
display:inline;
margin-left:15px;
}
<ul>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
</ul>

注:float:leftまたはを使用しないでくださいfloat:right。だから私は表示プロパティを好みました。

4

7 に答える 7

1

すべてのブラウザでテストしましたが、これは機能しています。とにかく、この問題に苦しんでいる場合はdisplay: inline-block;、親要素に追加してください。

于 2013-03-20T13:41:56.163 に答える
0

コードの問題は、div要素がまだブロック要素であるということです。それが、水平方向に並べられていない理由です。それらを作成する必要がありますinline-block（たとえば、高さやパディングを設定できるようにしたい場合）、そうでない場合は、単純inlineに設定できます。

min-heightとは 効果がないため、これを使用するかのように定義しwidthます。また、ルールをに適用する必要があります。liliinlineliinline-blockli

css

ul li{
    min-height:310px;
    background:#FFF;
    width:330px;
    display:inline;
    margin-left:15px;
}

//cross browser inline-block (the order in this rule is important so that it will work cross browser)
li div {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
}

html

<ul>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
</ul>
于 2013-03-20T13:37:15.460 に答える
0 
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

#navcontainer ul li {
    display: inline;
}

#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
}

#navcontainer ul li a:hover {
    color: #fff;
    background-color: #369;
}

<link rel="stylesheet" type="text/css" href="css/firstcss.css" />
<div id="navcontainer">
            <ul>    
                <li>
                    <a href="#">Milk</a>
                </li>
                <li>
                    <a href="#">Eggs</a>
                </li>
                <li>
                    <a href="#">Cheese</a>
                </li>
                <li>
                    <a href="#">Vegetables</a>
                </li>
                <li>
                    <a href="#">Fruit</a>
                </li>
            </ul>
        </div>
于 2013-03-20T12:58:29.100 に答える
0

クロムではすべてがうまく見えます

Olivera Kovacevic は、問題を解決する優れた迅速な決定を指摘していますが、後でそのようなスタイルで多くの問題が発生する可能性があります。

このスタイルの ccssingを実装してみてください

于 2013-03-20T12:21:15.157 に答える
0

white-space:nowrap私はあなたがあなたに必要だと思うul

ul { white-space:nowrap;}

于 2013-03-20T13:02:19.270 に答える
0

これはうまくいくはずです。

オーバーライドしている別のクラスがあるか、目的のクラスを参照していない（タイプミス）と思われます。

それとも、ブラウザの設定に問題があるのでしょうか? すべてのブラウザで失敗することを確認します。

于 2013-03-20T12:07:07.323 に答える
0

CSS を ul でテストしたところ、正常に動作しています (

  • 要素は水平に表示されます)。

    たぶん、これを上書きする他のルールがあるので、 !important を使用してみてください:

    display:inline !important;
    • 于 2013-03-20T12:12:03.220 に答える