0

こんにちは私はolとulタグが左側のサイドに数字と円を表示しないことに関していくつかの問題を抱えているようです。私はリセットcssを使用していません。これが私のコードです：

             <ol>
                <li>ALL FILES</li>
                <li>PHP SCRIPTS</li>
                <li>WORDPRESS</li>
                <li>JAVASCRIPT</li>
                <li>CSS MOBILE</li>
            </ol>
            <ul>
                <li>ALL FILES</li>
                <li>PHP SCRIPTS</li>
                <li>WORDPRESS</li>
                <li>JAVASCRIPT</li>
                <li>CSS MOBILE</li>
           </ul>
           <ul>
                <li>ALL FILES</li>
                <li>PHP SCRIPTS</li>
                <li>WORDPRESS</li>
                <li>JAVASCRIPT</li>
                <li>CSS MOBILE</li>
          </ul>
          <ul>
               <li>ALL FILES</li>
               <li>PHP SCRIPTS</li>
               <li>WORDPRESS</li>
               <li>JAVASCRIPT</li>
               <li>CSS MOBILE</li>
          </ul>


#menu .dropdown_3columns li {
    float: none;
    position: static;
    text-align: left;
}
#menu li {
    border: medium none;
    display: block;
    float: left;
    height: 28px;
    margin-left: 0;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 8px;
    position: relative;
    text-align: center;
}

どうすればolに数字と円を表示させることができますか？

編集：リストにカーソルを合わせると、意味がわかります。

リンク

4

3 に答える 3

2

display：blockを削除します。#menu liで、list-style-type：decimalを削除します。

#menu li {
display: block; //remove this line
}

削除します

#menu .dropdown_3columns ol, #menu .dropdown_3columns ul{
list-style-type: decimal; //remove this line
}
于 2012-10-05T07:59:45.270 に答える
2

他の回答が述べたように、問題は li 要素が設定されていることが原因です。これにより、要素に設定されdisplay: blockた幅全体が占有され、数字または箇条書きが表示領域から強制的に外れます。

これを修正するには、CSS を

#menu li {
    display: block;
    padding-left: 18px;
}

これに：

#menu li {
    display: inline-block; /* prevents the bullets being forced off the left-hand side, but still allows padding to be applied */
    padding-left: 8px;
    margin-left: 10px; /* This gives enough room for the bullets to be shown */
}

このセクションでは、すべてのli要素を 10 進数に設定しました。

#menu .dropdown_3columns ol,
#menu .dropdown_3columns ul {
    float: left;
    margin-top: 40px;
    margin-bottom: 25px;
    list-style-type: decimal;
}

したがって、数字の代わりに箇条書きが必要な場合は、このセクションの後に次を追加します。

#menu .dropdown_3columns ul {
    list-style-type: disc; /* or circle etc */
}
于 2012-10-05T08:48:59.197 に答える
2

................................................................... ...

こんにちは、削除します#menu li display:block;

このように

#menu li{
display:block; // remove this line
}
于 2012-10-05T08:10:27.363 に答える