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

时间：2016-08-26 10:17:19

标签： css

＆＃13 ;
＆＃13; 
p {
  counter-reset: counter;
}
p.counter {
  counter-increment: counter;
  padding-left: 50px;
}
p.counter:before {
  position: absolute;
  content: counter(counter, upper-roman)".";
  left: 0;
  width: 50px;
  text-align: left;
}
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;
}
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 {
  position: relative;
  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;
}
＆＃13; 
<body lang="zh-hk">
  <div id="container">
    <div id="nav">
      <a href="index.html">Contact</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>&#8226; <a href="#tpe">Taiwan Taoyuan International Airport (TPE)</a>
      </p>
      <p>&#8226; <a href="#rmq">Taichung Airport (RMQ)</a>
      </p>
      <p>&#8226; <a href="#khh">Kaohsiung International Airport (KHH)</a>
      </p>
      <hr>
      <h2 id="tpe">Taiwan Taoyuan International Airport (TPE)</h2>
      <p class="counter">This is counted 1. This is counted 1. This is counted 1. This is counted 1. This is counted 1. This is counted 1. This is counted 1. This is counted 1. This is counted 1. This is counted 1. This is counted 1. This is counted 1. This is counted 1.
        This is counted 1. This is counted 1.</p>
      <p class="counter">This is counted 2.</p>
    </div>
    <div id="footer">
      &#169;2016
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

我想在:before中使用伪元素p进行自动编号。

但我有一些缩进问题。这些数字太长了。它们应该在上面的行中对齐。数字左侧与文本开头之间的距离为50px。请帮忙。

2 个答案:

答案 0 :(得分：1)

更改或删除public function install() { $flag = parent::install(); if ($this->name !== 'urbitbasic') $flag = ($flag && $this->registerHook('displayRightColumnProduct')); $first_install = ($this->installer->installTables() && $this->installer->installCarriers() && $this->installer->installWarehouseCarriers() && $this->installTabs() && $this->registerHook('displayBackOfficeHeader') && $this->registerHook('actionCarrierUpdate') && $this->registerHook('actionObjectCarrierUpdateAfter') && $this->registerHook('displayCarrierList') && $this->registerHook('displayOrderConfirmation') && $flag); // Now we install the second module $mysecondmodule = Module::getInstanceByName('{thenameofyoursecondmodule}'); $second_install = $mysecondmodule->install(); return $first_install AND $second_install; } 和{{1}}

段落标记上有50px的左边距，而伪元素的宽度设置为50px。

如果您不想要那个宽度......请调整它。

答案 1 :(得分：0)

  1. 要解决自动编号问题，请在body上重置计数器，而不是p。

  2. 要解决填充/边距问题，请调整left: 10px的{​​{1}} 

    3. p.counter
    body {
  counter-reset: counter;
}
p.counter {
  counter-increment: counter;
  padding-left: 30px;
}
p.counter:before {
  position: absolute;
  content: counter(counter, upper-roman)".";
  left: 10px;
  width: 30px;
  text-align: left;
}
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;
}
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 {
  position: relative;
  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;
}

相关问题
最新问题