body {
background-color: #FFFFFF;
background-image: url("background.jpg");
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-family: arial, helvetica, sans-serif;
font-size: 22px;
color: #808080;
}
p {
font-size: 22px;
color: #808080;
}
h1 {
font-size: 32px;
font-weight: bold;
}
h2 {
font-size: 22px;
font-weight: bold;
}
h3 {
font-size: 22px;
font-weight: normal;
text-decoration: underline;
}
hr {
border: 0;
border-bottom: 1px dashed #808080;
}
.pass {
counter-reset:paragraph;
}
.pass p {
padding-left: 50px;
}
.pass p:before {
counter-increment:paragraph;
content:counter(paragraph);
position:absolute;
left:0;
text-align: left;
width:50px;
}
a:link {
color: #B2AB19;
text-decoration: none;
border: none;
}
a:hover {
color: inherent;
text-decoration: none;
border-bottom: 1px solid #B2AB19;
}
a:active {
color: inherent;
text-decoration: none;
border: none;
}
a:visited {
color: #B2AB19;
text-decoration: none;
border: none;
}
#container {
width: 90%;
margin: 0 auto;
background: #FFFFFF;
}
#nav {
clear: both;
width: 100%;
background-color: #FFFFFF;
border: 0px;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
}
#header {
clear: both;
width: 100%;
background-color: #FFFFFF;
border: 0px;
margin: 0 auto;
box-sizing: border-box;
}
#lcolumn {
float: left;
max-width: 250px;
border: 0px;
padding: 10px;
box-sizing: border-box;
}
#rcolumn {
margin-left: 250px;
border: 0px;
padding: 10px;
box-sizing: border-box;
}
#footer {
clear: both;
width: 90%;
background-color: #FFFFFF;
border: 0px;
margin: 0 auto;
text-align: center;
padding: 10px;
box-sizing: border-box;
}<body lang="zh-hk">
<div id="container">
<div id="nav">
<a href="contact.html">Contact Us</a>
</div>
<div id="header">
<img src="header.jpg" alt="testing" width=100% height=260>
</div>
<div id="lcolumn">
<p><a href="index.html">Chiayi</a></p>
<p><a href="index.html">From the Airports</a></p>
<p><a href="index.html">Places</a></p>
<p><a href="index.html">Food and Drinks</a></p>
<p><a href="index.html">Bike Trips</a></p>
</div>
<div id="rcolumn">
<h1>Reaching Chiayi City from the Airports by Public Transport</h1>
<p>Which interational airport will you arrive at?</p>
<p>• <a href="#tpe">Taiwan Taoyuan International Airport (TPE)</a></p>
<p>• <a href="#rmq">Taichung Airport (RMQ)</a></p>
<p>• <a href="#khh">Kaohsiung International Airport (KHH)</a></p>
<hr>
<h2 id="tpe">Taiwan Taoyuan International Airport (TPE)</h2>
<p>Taiwan Taoyuan International Airport (TPE) is located in the north of Taiwan and the furthest from Chiayi.</p>
<div class="pass">
<p>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></p>
<p>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></p>
</div>
<p>The total trip time is about 4 hours. The tickets of the buses are sold together as a package. You need to buy them from the operator Ubus in advance at the bus counter or online. Pay attention at the promotion.
</div>
<div id="footer">
©2016
</div>
</div>
</body>
我从这篇文章中了解了如何使用伪之前的自动编号： right-align CSS before: numbers?
我喜欢这个方法：
在数字之前没有空格
我可以在数字的左边创建一个固定距离的空间 和文本的开头
整个段落缩进，而不仅仅是第一行
我尝试应用该方法，但数字太过分了。请参阅： jsfiddle.net/milktheox/fe9o9cen /
我尝试了不同的方法，例如： http://www.2ality.com/2012/01/numbering-headingshtml.html 但他们无法实现我的3个目标。请指教。非常感谢！
答案 0 :(得分：0)
您需要在父级上设置position: relative以包含position: absolute个数字。尝试这样的事情：http://jsfiddle.net/fe9o9cen/1/。