自動番号付け前のCSS擬似 - 字下げ

最初の行のテキストを2行目（50px）のように字下げしたいと思います。それを行う方法は？どうもありがとう！自動番号付け前のCSS擬似 - 字下げ

body \t { 
 
\t counter-reset: h2counter; 
 
} 
 
h1 \t { 
 
\t counter-reset: h2counter; 
 
} 
 
h2 \t { 
 
\t padding-left: 50px; 
 
\t text-indent: -50px; 
 
} 
 
h2:before { 
 
\t content: counter(h2counter) "."; 
 
\t counter-increment: h2counter; 
 
\t left: 0; 
 
\t width: 50px; 
 
\t text-align: left; \t 
 
}

<h2>Take bus 1627 running from Taiwan Taoyuan International Airport to Zhongli Service Area. Get off at Zhongli Service Area for the transfer to the next bus. More bus details: <a href="http://www.ubus.com.tw/html/line/show.php?num=37" target="_blank">Ubus</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=2986" target="_blank">Taiwan Bus</a>; <a href="http://www.taoyuan-airport.com/english/Buses/#e0871f13-0119-445f-8a41-f9a6913cc00e" target="_blank">Airport transportation guide</a></h2> 
 
<h2>Take bus 1618 running from Taipei Bus Station to Chiayi Bus Station. Some buses do not stop at Linkou and Zhonggang Bus Station, but this does not matter to passengers going to Chiayi. More bus details: <a href="http://www.ubus.com.tw/html/line/show.php?num=23" target="_blank">Ubus</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=4321" target="_blank">Taiwan Bus 1</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=9237" target="_blank">Taiwan Bus 2</a></h2>

出典

2016-08-18 Sen

このような何か？

body { 
 
    counter-reset: h2counter; 
 
} 
 
h1 { 
 
    counter-reset: h2counter; 
 
} 
 
h2 { 
 
    padding-left: 50px; 
 
} 
 
h2:before { 
 
    position: absolute; 
 
    content: counter(h2counter)"."; 
 
    counter-increment: h2counter; 
 
    /* Adjust 'left' value as required */ 
 
    left: 10px; 
 
    width: 50px; 
 
    text-align: left; 
 
}

<h2>Take bus 1627 running from Taiwan Taoyuan International Airport to Zhongli Service Area. Get off at Zhongli Service Area for the transfer to the next bus. More bus details: <a href="http://www.ubus.com.tw/html/line/show.php?num=37" target="_blank">Ubus</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=2986" target="_blank">Taiwan Bus</a>; <a href="http://www.taoyuan-airport.com/english/Buses/#e0871f13-0119-445f-8a41-f9a6913cc00e" target="_blank">Airport transportation guide</a></h2> 
 
<h2>Take bus 1618 running from Taipei Bus Station to Chiayi Bus Station. Some buses do not stop at Linkou and Zhonggang Bus Station, but this does not matter to passengers going to Chiayi. More bus details: <a href="http://www.ubus.com.tw/html/line/show.php?num=23" target="_blank">Ubus</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=4321" target="_blank">Taiwan Bus 1</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=9237" target="_blank">Taiwan Bus 2</a></h2>

出典

2016-08-18 08:12:16 Pugazh

ああ、これは完璧です。どうもありがとう！！ – Sen

上向き矢印も押しました。 – Sen

@Sen：ここで役立つすべての回答に投票することができます。お力になれて、嬉しいです：-） – Pugazh

私はあなたがこのように意味推測が、私はよく分かりません。

body { counter-reset: h2counter; } h1 { counter-reset: h2counter; } h2 { padding-left: 50px; text-indent: -50px; } h2::before { content: counter(h2counter)"."; counter-increment: h2counter; width: 50px; float: left; } /* Clear fix */ h2::after { content: ""; display: table; clear: both; }

<h2>Take bus 1627 running from Taiwan Taoyuan International Airport to Zhongli Service Area. Get off at Zhongli Service Area for the transfer to the next bus. More bus details: <a href="http://www.ubus.com.tw/html/line/show.php?num=37" target="_blank">Ubus</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=2986" target="_blank">Taiwan Bus</a>; <a href="http://www.taoyuan-airport.com/english/Buses/#e0871f13-0119-445f-8a41-f9a6913cc00e" target="_blank">Airport transportation guide</a></h2> <h2>Take bus 1618 running from Taipei Bus Station to Chiayi Bus Station. Some buses do not stop at Linkou and Zhonggang Bus Station, but this does not matter to passengers going to Chiayi. More bus details: <a href="http://www.ubus.com.tw/html/line/show.php?num=23" target="_blank">Ubus</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=4321" target="_blank">Taiwan Bus 1</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=9237" target="_blank">Taiwan Bus 2</a></h2>

出典

2016-08-18 08:09:05

それは近いですが、ナンバリングプラス30pxのマージン右は正確に2行目と同じではありません。 – Sen

私の編集をご覧ください。 –

それは働いた！すべての道がローマにつながる！ありがとうございました！ – Sen

CSSクラスh2からtext-indent: -50px;を削除します。

h2 \t { 
 
\t padding-left: 50px; 
 
} 
 
h2:before { 
 
\t content: counter(h2counter) "."; 
 
\t counter-increment: h2counter; 
 
\t left: 0; 
 
\t text-align: left; \t 
 
}

<h2>Take bus 1627 running from Taiwan Taoyuan International Airport to Zhongli Service Area. Get off at Zhongli Service Area for the transfer to the next bus. More bus details: <a href="http://www.ubus.com.tw/html/line/show.php?num=37" target="_blank">Ubus</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=2986" target="_blank">Taiwan Bus</a>; <a href="http://www.taoyuan-airport.com/english/Buses/#e0871f13-0119-445f-8a41-f9a6913cc00e" target="_blank">Airport transportation guide</a></h2> 
 
<h2>Take bus 1618 running from Taipei Bus Station to Chiayi Bus Station. Some buses do not stop at Linkou and Zhonggang Bus Station, but this does not matter to passengers going to Chiayi. More bus details: <a href="http://www.ubus.com.tw/html/line/show.php?num=23" target="_blank">Ubus</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=4321" target="_blank">Taiwan Bus 1</a>; <a href="http://www.taiwanbus.tw/information.aspx?Lang=En&Line=9237" target="_blank">Taiwan Bus 2</a></h2>

出典

2016-08-18 08:15:28 Radex

自動番号付け前のCSS擬似 - 字下げ

答えて

関連する問題