8

olマージンが残っている項目が見つかりましたが、マージンが残っ<p>This is first row</p>ていないため、これらの 3 つの行は左揃えにできません。それらを左揃えにするにはどうすればよいですか？ありがとう！

結果は次の場所で確認できます。

またはDropboxの次の場所にあります：

https://www.dropbox.com/s/nr4bb00sd80pgl9/Mycss.PNG

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type="text/css">
       li.A {
          list-style-type: decimal;
          font-weight: bold;
           margin-bottom:15px;          
        }

        li.B{
          list-style-type:upper-alpha;
          font-weight:normal;
          margin-top:4px;
          margin-bottom:4px;   

        }

        ol.C {

        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>This is first row</p>
        <ol>
            <li class="A">DIY SMS Export V1.05 has been released
                <ol class="C">
                    <li class="B">Add the function to delete sms selected</li>
                </ol>
            </li>

            <li class="A">DIY SMS Export V1.04 has been released
                <ol class="C">
                    <li class="B">Add chinese language support</li>
                </ol>
            </li>
        </ol>  
    </div>
    </form>
</body>
</html>
4

4 に答える 4

23

CSSを追加してみましたか：

ol{ padding-left:0; list-style-position:inside; }

作業中のjsFiddle

于 2013-06-30T14:51:58.473 に答える
3

この JS Fiddle をご覧ください: http://jsfiddle.net/BPFQm/1/

list-style-position: insideUseと set padding-left: 0(例の「内部」クラス) の2 つのオプションがあると思います。( の使用法はlist-style-positionMDN here で説明されています)。padding-leftまたは、段落テキストと一致するまで操作できます。

他のいくつかの回答は追加を提案していますmargin-left: 0が、それが必要かどうかはわかりません。私のフィドルでは確かに必要ありませんでした。

更新: 私が作成したJS Fiddleをもう一度見てください。リスト項目が複数行にまたがる場合/場合に表示される、2 つの方法の重要な違いがわかります。使用するlist-style-position: insideと、後続の行は番号/ラベルと同じになります。一方、左パディングを変更すると、テキストが数値/ラベルのすぐ右側に独自のマージンを持つ標準形式が維持されます。目的に合わせて好きな形式を選択してください。

于 2013-06-30T15:03:25.763 に答える
1

すべてを左側に移動するには、次のようにします。

ol, ol li { margin-left:0; padding-left:0; list-style-position:inside; }
于 2013-06-30T14:55:11.720 に答える