自动编号前​​的CSS伪 - 缩进

时间：2016-08-18 08:05:08

标签： css

我想让第一行的文字缩进，就像第二行（50px）一样。有办法吗？非常感谢！

body	{
	counter-reset: h2counter;
}
h1	{
	counter-reset: h2counter;
}
h2	{
	padding-left: 50px;
	text-indent: -50px;
}
h2:before {
	content: counter(h2counter) ".";
	counter-increment: h2counter;
	left: 0;
	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>

3 个答案:

答案 0 :(得分：0)

我猜你的意思是这样，但我不确定。

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>

答案 1 :(得分：0)

这样的东西？

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

从CSS类text-indent: -50px;中删除h2。

＆＃13;
＆＃13; 
h2	{
	padding-left: 50px;
}
h2:before {
	content: counter(h2counter) ".";
	counter-increment: h2counter;
	left: 0;
	text-align: left;	
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题