Come si fa a fare le tabulazioni in HTML/CSS

C’è qualche testo in cui la formattazione vorrei rendering HTML. Ecco un’immagine:

Come si fa a fare le tabulazioni in HTML/CSS

Nota le linee grigie con i punti elenco e i numeri di paragrafo. I proiettili dovrebbero essere centrato nella pagina e il numero dovrebbe essere allineato a destra.

Ho cercato di pensare a come fare questo in HTML e sono venuta in bianco. Come si cattura questa formattazione?

  • Stai cercando un puramente html/css soluzione?
  • Assolutamente. CSS3, se è quello che ci vuole. Voglio imparare. Questo problema mi ha sempre infastidito.
  • Penso che questo può essere facilmente realizzato con un po ‘di JavaScript, quindi ho pensato di chiedere un po’ di più sui tuoi previsto soluzione.
  • Che cosa fa il codice html, come?
  • Secondo I Jeroen. Sei alla ricerca solo di suddividere ciascuna delle “parargaphs” o in “bullet points” e non hanno la necessità di inserire i numeri e bullet raggruppamenti manualmente? Se è così, mi piacerebbe guardare in styling in un elenco ordinato e unire un po ‘ di JS per afferrare ordinale e il rendering di un corrispondente elemento di presentare le pallottole
  • Come questo è educativo, lascio a voi definire il codice HTML. Sto imparando le tecniche di tabulazione, piuttosto che lavorare su un progetto specifico.
  • Sampson: sembra Che JavaScript potrebbe essere una buona opzione qui, vedi OPs commento su la mia risposta.

 

6 Replies
  1. 15

    È possibile utilizzare il :before e :after pseudo-elementi di grande effetto qui:

    http://jsfiddle.net/yNnv4/1/

    Questo funziona in tutti i browser moderni e IE8+. Se IE7 è necessario un sostegno, questa non è una risposta per voi 🙂

    #container {
        counter-reset: nums;
    }
    p {
        position: relative;
        margin: 21px 0;
    }
    p:before {
        content: '\2022 \2022';
        font-size: 2em;
        position: absolute;
        top: -8px;
        left: 0;
        line-height: 1px;
        color: #888;
        width: 100%;
        text-align: center
    }
    p:after {
        content: counter(nums);
        counter-increment: nums;
        font-size: 1.5em;
        position: absolute;
        top: -8px;
        right: 0;
        line-height: 1px;
        color: #888;
        font-family: sans-serif
    }

    Circa il counter proprietà:


    Non è possibile (automaticamente) incrementa le pallottole.

    Tuttavia, può essere fatto con alcuni di dubbia ripetizione:

    http://jsfiddle.net/N4txk/1/

    p:before { content: '\2022' }
    p+p:before { content: '\2022 \2022' }
    p+p+p:before { content: '\2022 \2022 \2022' }
    /* .... */

    (in alternativa, :nth-child può essere ripetuto nello stesso modo: http://jsfiddle.net/N4txk/ – ma non funziona in IE8; ci saranno solo due proiettili)

    C’è un limite superiore al numero di proiettili sarebbe sensibile di avere, quindi penso che sarebbe accettabile copia e incolla come numero di volte necessario.

    • Ho aggiunto i numeri.
    • eccellente utilizzo, ma non so se l’OP vuole proiettili per incr come bene. immagine originale sembra riflettere questo
    • Ben fatto! Sono sicuro che c’è un modo per incr le pallottole con JS.
    • Penso che sia possibile aumentare i proiettili con i CSS. Sto cercando a esso.
    • I punti non devono generare. Vorrei generare il codice HTML lato server, quindi non sono preoccupato per questo troppo. Anche io sono felice di usare JS per la loro generazione. Preoccupato soprattutto per come lo stile delle campate.
    • Krueger: Quindi la mia risposta è elegante in un modo che è del tutto inutile 🙁 Se il resto del tuo sito richiede JavaScript, quindi si dovrebbe utilizzare JavaScript per raggiungere questo obiettivo. In caso contrario, il bastone con il codice HTML fornito mediante il codice lato server. Le altre risposte già in grado di coprire l’HTML/CSS per fare questo.

  2. 5

    Come a qualcosa del genere?

    http://jsfiddle.net/6eTCf/

    <div class="separator">
       * <div class="page_number">1</div>
    </div>
    
    
    .separator{
        margin: 5px 0 5px 0;
        color:gray;
        position:relative;  
        text-align: center;
    }
    
    .page_number{
        position:absolute;
        right: 3px; 
        top: 0; 
    }
  3. 1

    Vorrei galleggiare il numero a destra e al centro il contenuto residuo (punti). Se si dà il contenuto residuo pari a sinistra e a destra del margine più ampio di quanto i numeri sono ampie, il contenuto sarà centrato.

    • Ah, interessante. Mi chiedevo come hack galleggiante di lavoro. Mai pensato di parità di margini sinistro e destro semplicemente essendo più grande il numero!!!
  4. 1

    Vorrei avvolgere il tutto in un div, quindi utilizzare relativi/assoluti posizionamento tra l’involucro e il numero di paragrafo div per ottenere i numeri sul lato destro del genere.

    Ecco un violino che mostra come farlo.

    • Molto bello. E grazie per la demo!
  5. 0

    Ci sono un paio di modi in cui posso pensare.

    Aggiungere un <div> tra i paragrafi, quindi aggiungere due <p>‘s: <p class="dot"></p> e <p class="pnum">1</p>.

    Stile <div> per la larghezza dei paragrafi, e impostare nel CSS il seguente:

    .dot{ text-align: center; }
    .pnum{ float: right; }
    • Non che galleggiano causare il centro sinistra di parte? Penso che @jeroen ha la correzione per rendere questo stile di lavoro.
  6. 0

    Ci sono diversi modi in cui posso pensare:

    • Float + posizione assoluta (lascio i puristi spiegare questo)
    • Vecchio stile tabella (cercherò di spiegare questo dato che è il più facile):

    Se la larghezza totale dell’area è, diciamo, 300px

    <table><tr>
       <td width="30"></td>
       <td width="240" align="center">bullets</td>
       <td width="30" align="right">number</td>
    </tr></table>

    Molte persone preferiscono utilizzare un CSS puro, ma mi piace il mio tabelle, lavorano solo per me

    • Scusate, sono di downvote uso di tabelle.
    • Raccomandando di tabelle per il layout è sciatta.
    • segnalibro di me e preparare per downvote me in tutto il posto allora 🙂
    • Fintanto che non riesco a modificare il tuo codice, siamo a posto. 😉

Lascia un commento