Question

我想在我的网站上添加一些自定义css / html，以便列表帖子（十大最佳假期等）的数字不在列中。例如，而不是正常的

| 1。纽约

|

| 2。佛罗里达

|

| 3。夏威夷

|

我希望它看起来像

1 |纽约

|

2 |佛罗里达

|

3 |夏威夷

|

我希望数字非常大，但不要搞砸文本的格式。我曾经看过“纽约时报”这样的地方用引号，图片等来做这件事。

我试过这段代码：

.list-number{
    display: block;
    font-family: 'Merriweather'; 
    color: rgba(0,0,0,.7);
    font-size: 5.5rem;
    position: relative;
    left: -15px;
    width: 0;
    overflow: visible;
    z-index: 100000;
}

它将数字向左移动，但是一旦它离开容器，数字就会消失。它也留下了本来可以的空间段落。我已经修补了一个小时，我不知道需要改变什么。

（当针对移动设备调整大小时，我计划在@media查询中将其更改为正常 - 但尚未获得那么远。）

Answer 1

即使是无序列表，您也可以使用此答案。

使用项目计数器并将其放在::before伪元素

中的列表项之前

＆＃13;

li {
    width: 150px;
    background: orange;
    display: block;
    margin: 5px 0 5px 30px;
    padding: 5px;
    box-sizing: border-box;
}
ul {
  counter-reset: num;
}
li:before {
    counter-increment: num;
    content: counter(num);
    display: inline-block;
    position: relative;
    width: 20px;
    margin: -5px 20px -5px -25px;
    padding: 5px;
    color: yellow;
    background: green;
    text-align: center;
}

＆＃13;

<ul>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 <li>item5</li>
 <li>item6</li>
 <li>item7</li>
</ul>

＆＃13;

Answer 2

如果你使用自定义计数器并且绝对将子弹放在:before个元素中，你可以格式化它，但是你喜欢：

.list-number li{
    position:relative;
    counter-increment: counter;
}

.list-number li:before {
    content: counter(counter);
    position: absolute;
    left: -80px;
}

.list-number{
    list-style:none;
    display: block;
    font-family: 'Merriweather'; 
    color: rgba(0,0,0,.7);
    font-size: 5.5rem;
    overflow: visible;
    z-index: 100000;
    padding: 0 0 0 100px;
}

https://jsfiddle.net/bq7at1g1/

Answer 3

看看这个例子，我创建了两个父div和子跨度的容器，并将相对于左侧的跨度定位为负值：

.parent{
  background-color:red;
  width:200px;
  height:200px;
  margin-left:10px;
  
}
.child{
  position:relative;
  left:-15px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <span class="child">
    1 Hello
    </span>
  </div>
</body>
</html>

Answer 4

我相信你正在寻找这样的东西。 http://codepen.io/Elysium13/pen/qROpZN

body {
  background-color:#f8f8f8;
}
.section-block{
  display:block;
  padding:10px;
  margin:0 25px 0 25px;
  background-color:white;
  border-bottom:1px solid #f8f8f8;
}
.section-block .list-no{
  position:absolute;
  margin-left:-33px;
  font-size:30px;
  color:#5bc0de;
}
.section-block .list-title {
  display:inline-block;
  color:#aaa;
  margin:0 0 5px 0;
}
.section-block .list-description {
  margin-left:15px;
  color:#111;
}

<!DOCTYPE html>
<html>
  <body>
    <section class="section-block">
      <span class="list-no">1</span>
      <h4 class="list-title">New York</h4>
      <br>
      <small class="list-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</small>
    </section>
    <section class="section-block">
      <span class="list-no">2</span>
      <h4 class="list-title">Florida</h4>
      <br>
      <small class="list-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</small>
    </section>
    <section class="section-block">
      <span class="list-no">3</span>
      <h4 class="list-title">Hawaii</h4>
      <br>
      <small class="list-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</small>
    </section>
  </body>
</html>

如何在容器外显示数字/文本

4 个答案: