Jak zrobić tabulatory w HTML/CSS

Question

Istnieje trochę tekstu, którego formatowanie chciałbym renderować w HTML. Oto zdjęcie:

Uwaga szare linie z wypunktowania oraz numery akapitów. Pociski powinny być wyśrodkowane na stronie, a liczby powinny być odpowiednio uzasadnione.

Próbowałem wymyślić, jak to zrobić w HTML i jestem pusta. Jak chcesz uchwycić to formatowanie?

Answer 1

Chciałbym unieść liczbę w prawo i wyśrodkować pozostałą zawartość (punkty). Jeśli podasz pozostałą zawartość równą lewemu i prawemu marginesowi większemu niż liczby są szerokie, zawartość zostanie wyśrodkowana.

Answer 2

Istnieje kilka sposobów można myślę:

• Float + absolutnej pozycji (dam puryści wyjaśnić ten jeden)
• Stary styl tabeli (Wytłumaczę to, ponieważ jest to najprostszy):

Jeżeli całkowita szerokość strefy jest, powiedzmy 300px

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

Wiele ludzie wolą przy użyciu czystego CSS, ale podoba mi się moje tabel, po prostu pracować dla mnie

Answer 3

Można użyć pseudohalogenek elementy z dobrym skutkiem tutaj :before i :after:

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

to będzie działać w ogóle nowoczesne przeglądarki i IE8 +. Jeśli wymagane jest wsparcie IE7, to odpowiedź nie jest dla ciebie :)

#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 
} 

o właściwościach counter:

• https://developer.mozilla.org/en/CSS_Counters
• http://www.w3.org/TR/CSS21/syndata.html#counter
• http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

---

Nie można (automatycznie) zwiększać liczby pocisków.

Jednak można to zrobić z jakiejś wątpliwej powtarzalności:

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

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

(alternatywnie :nth-child mogą być powtarzane w ten sam sposób: http://jsfiddle.net/N4txk/ - ale to nie będzie działać w IE8 ; będą tylko dwa pociski)

Istnieje górny limit liczby pocisków, który byłby rozsądny mieć, więc myślę, że byłoby dopuszczalne, aby skopiować i wkleić to tyle razy, ile potrzeba.

Answer 4

Co powiesz na coś takiego?

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; 
} 

Answer 5

Chciałbym zawinąć całość w div, a następnie użyć względnej/bezwzględnej pozycjonowanie między owijki oraz numer ustępu div aby uzyskać numery na prawej stronie takiego.

Oto fiddle pokazujący, jak to zrobić.

Answer 6

Istnieje kilka sposobów, które mogę wymyślić.

Dodaj <div> między ustępów, następnie dodać dwa <p> dydaktycznego: <p class="dot"></p> i <p class="pnum">1</p>.

Style <div> do szerokości paragrafów i ustaw w CSS, co następuje:

.dot{ text-align: center; } 
.pnum{ float: right; }