ol li linken Rand, und kann nicht linksbündig

Ich finde die Elemente ol haben linken Rand, aber <p>This is first row</p> haben keinen linken Rand, so dass diese drei Zeilen nicht links ausgerichtet werden können. Wie kann ich sie linksbündig machen? Vielen Dank!ol li linken Rand, und kann nicht linksbündig

Sie das Ergebnis sehen:

oder in Dropbox an:

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>

Quelle

2013-06-30 HelloCW

Haben Sie die CSS versucht, indem:

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

working jsFiddle

Quelle

2013-06-30 14:51:58

Stop-Kopieren, was andere Leute – Hive7

Beiträge geschrieben haben nicht kopiert haben, eine jsFiddle erstellt und realisiert Zahlen zeigen nicht .. dieser ist ziemlich grundlegende Sachen .. –

warst du das downvoted? – Hive7

Um alles den ganzen Weg nach links zur Seite, versuchen Sie dies:

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

Quelle

2013-06-30 14:55:11 relic

Haben Sie einen Blick auf diese JS Fiddle: http://jsfiddle.net/BPFQm/1/

Sie haben zwei Möglichkeiten, denke ich: Verwenden Sie list-style-position: inside und setzen Sie padding-left: 0 (die "Inside" -Klasse im Beispiel). (Die Verwendung von list-style-position ist explained on MDN here). Oder Sie können padding-left manipulieren, bis es mit Ihrem Absatztext übereinstimmt.

Einige andere Antworten schlagen vor, margin-left: 0 hinzuzufügen, aber ich bin nicht sicher, dass das notwendig ist. In meiner Fiddle war das sicher nicht nötig.

UPDATE: Schauen Sie sich die JS Fiddle ich wieder gemacht und Sie werden einen wichtigen Unterschied zwischen den beiden Methoden sehen, die angezeigt wird, wenn/wenn Ihr Listenelement mehrere Zeilen umfasst. Wenn Sie list-style-position: inside verwenden, werden nachfolgende Zeilen bündig mit der Nummer/dem Label sein; während das Ändern der linken Auffüllung das Standardformat beibehält, in dem der Text seinen eigenen Rand genau rechts von der Zahl/dem Etikett hat. Wählen Sie, welches Format Sie für Ihre Zwecke bevorzugen.

Quelle

2013-06-30 15:03:25 davidtheclark

Standardmäßig haben alle ol/ul Tags eine Auffüllung von links. Sie können das Padding entfernen, dann funktioniert es.

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

Check-Snippet

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

<ol> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
</ol> 
 

 
<ul> 
 
    <li>list-item - 1</li> 
 
    <li>list-item - 2</li> 
 
    <li>list-item - 3</li> 
 
    <li>list-item - 4</li> 
 
    <li>list-item - 5</li> 
 
</ul>

Quelle

2017-05-11 07:14:47

ol li linken Rand, und kann nicht linksbündig

Antwort

Verwandte Themen