在CSS重置后，li中的第二行从图标开始

Question

我想显示像这样的列表项

这是我的代码显示方式

我想在成功文本下准确启动文本“服务器位置”。如何在css的帮助下完成这项工作？

Answer 1

使用foreach列表

list-style: outside;

li {
  list-style: outside;
}

由于您使用的是自定义公告，因此您必须将元素移到容器外。

<ul>
  <li>Donec purus lectus, tempus at mollis at, volutpat id neque. Aenean id porta metus. Proin blandit rhoncus elementum. Quisque non arcu faucibus, eleifend ex luctus, rhoncus orci. Sed rutrum eros quis accumsan consectetur. Nunc gravida ipsum at pharetra
    dapibus. Cras ornare mauris enim, et pharetra lectus vehicula et.</li>

  <li>Donec purus lectus, tempus at mollis at, volutpat id neque. Aenean id porta metus. Proin blandit rhoncus elementum. Quisque non arcu faucibus, eleifend ex luctus, rhoncus orci. Sed rutrum eros quis accumsan consectetur. Nunc gravida ipsum at pharetra
    dapibus. Cras ornare mauris enim, et pharetra lectus vehicula et.</li>
</ul>

ul {
  padding: 0;
}

li {
  list-style: none;
  margin-left: 30px;
  position: relative;
  padding: 0;
}
li:before {
  content: '->';
  position: absolute;
  left: -20px;
  display: inline;
}

Answer 2

查看glyphicon-record更新，我使用glyphicon作为背景，尝试使用宽度演示

ul {
  padding: 0;
}

li {
  list-style: none;
  margin-left: 30px;
  position: relative;
  padding: 0;
  display: block;
}
li:before {
  color: red;
  content:"\e165";
  font-family:"Glyphicons Halflings";
  line-height:1;
  left: -20px;
  display:inline-block;
  position: absolute;
  top: 3px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul>
  <li>Donec purus lectus, tempus at mollis at, volutpat id neque. Aenean id porta metus. Proin blandit rhoncus elementum. Quisque non arcu faucibus, eleifend ex luctus, rhoncus orci. Sed rutrum eros quis accumsan consectetur. Nunc gravida ipsum at pharetra
    dapibus. Cras ornare mauris enim, et pharetra lectus vehicula et.</li>

  <li>Donec purus lectus, tempus at mollis at, volutpat id neque. Aenean id porta metus. Proin blandit rhoncus elementum. Quisque non arcu faucibus, eleifend ex luctus, rhoncus orci. Sed rutrum eros quis accumsan consectetur. Nunc gravida ipsum at pharetra
    dapibus. Cras ornare mauris enim, et pharetra lectus vehicula et.</li>
</ul>

Answer 3

您也可以试试这个

ul{
  list-style:none;
}
ul li{
  position:relative;
  padding-left:10px;
}
ul li span.glyphicon{
  position:absolute;
  left:-15px;
  top:4px;
  color:red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<ul>
<li><span class="glyphicon glyphicon-record techico" aria-hidden="true"></span>Donec purus lectus, tempus at mollis at, volutpat id neque. Aenean id porta metus. Proin blandit rhoncus elementum. Quisque non arcu faucibus, eleifend ex luctus, rhoncus orci. Sed rutrum eros quis accumsan consectetur. Nunc gravida ipsum at pharetra
    dapibus. Cras ornare mauris enim, et pharetra lectus vehicula et.</li>
<li><span class="glyphicon glyphicon-record techico" aria-hidden="true"></span>Donec purus lectus, tempus at mollis at, volutpat id neque. Aenean id porta metus. Proin blandit rhoncus elementum. Quisque non arcu faucibus, eleifend ex luctus, rhoncus orci. Sed rutrum eros quis accumsan consectetur. Nunc gravida ipsum at pharetra
    dapibus. Cras ornare mauris enim, et pharetra lectus vehicula et.</li>
<li><span class="glyphicon glyphicon-record techico" aria-hidden="true"></span>Donec purus lectus, tempus at mollis at, volutpat id neque. Aenean id porta metus. Proin blandit rhoncus elementum. Quisque non arcu faucibus, eleifend ex luctus, rhoncus orci. Sed rutrum eros quis accumsan consectetur. Nunc gravida ipsum at pharetra
    dapibus. Cras ornare mauris enim, et pharetra lectus vehicula et.</li>
<li><span class="glyphicon glyphicon-record techico" aria-hidden="true"></span>Donec purus lectus, tempus at mollis at, volutpat id neque. Aenean id porta metus. Proin blandit rhoncus elementum. Quisque non arcu faucibus, eleifend ex luctus, rhoncus orci. Sed rutrum eros quis accumsan consectetur. Nunc gravida ipsum at pharetra
    dapibus. Cras ornare mauris enim, et pharetra lectus vehicula et.</li>
</ul>

Answer 4

<style>
ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

li { 
    padding-left: 16px; 
}

li:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: blue; /* Or a color you prefer */
}
</style>