ol li hanno margine sinistro e non possono essere allineati allineati

Trovo che gli articoli di ol abbiano margine sinistro, ma <p>This is first row</p> non hanno margine sinistro, quindi queste tre righe non possono essere lasciate allineate. Come posso renderli allineati a sinistra? Grazie!ol li hanno margine sinistro e non possono essere allineati allineati

È possibile vedere il risultato in:

o in Dropbox a:

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>

fonte

2013-06-30 HelloCW

Hai provato l'aggiunta del css:

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

working jsFiddle

fonte

2013-06-30 14:51:58

Interruzione copia quello che gli altri hanno inviato – Hive7

non ha copiato, ha creato un jsFiddle e realizzato i numeri non vengono visualizzati .. questo è roba piuttosto di base .. –

è stato tu che hai downvoted? – Hive7

per ottenere tutto ciò tutta la strada a sinistra, provate questo:

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

fonte

2013-06-30 14:55:11 relic

Date un'occhiata a questo JS Fiddle: http://jsfiddle.net/BPFQm/1/

si hanno due opzioni, penso: Utilizzare list-style-position: inside e impostare padding-left: 0 (la classe "inside" nell'esempio). (L'utilizzo di list-style-position è explained on MDN here). Oppure puoi manipolare padding-left finché non si allinea con il testo del paragrafo.

Altre risposte suggeriscono di aggiungere margin-left: 0 ma non sono sicuro che sia necessario. Certamente non era necessario nel mio Fiddle.

AGGIORNAMENTO: Guarda il JS Fiddle che ho fatto di nuovo e vedrai una differenza importante tra i due metodi, che compare quando/se la tua voce di lista si estende su più righe. Se si utilizza list-style-position: inside, le righe successive saranno a filo con il numero/etichetta; mentre la modifica della spaziatura sinistra mantiene il formato standard in cui il testo ha il suo margine proprio a destra del numero/etichetta. Scegli il formato che preferisci per i tuoi scopi, suppongo.

fonte

2013-06-30 15:03:25 davidtheclark

Per impostazione predefinita, tutti i tag ol/ul hanno un riempimento da sinistra. è possibile rimuovere quel riempimento, quindi funzionerà.

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

controllo frammento di seguito

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>

fonte

2017-05-11 07:14:47

ol li hanno margine sinistro e non possono essere allineati allineati

risposta

Problemi correlati