Question

当移动中的第一行中断时，我想开始让第二行从第一行开始。有关如何在列表中达到此目的的任何想法吗？

Codepen：https://codepen.io/altos/pen/KoKEba

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <ul>
    <li>
      <a href="#">
        <i class="fa fa-download">     </i>
        <span class="file-title">Link 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr     </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-download">     </i>
        <span class="file-title">Link 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr     </span>
      </a>
    </li>
  </ul>
</body>

Answer 1

将display属性提供给a以便在同一行打破

ul li a {
    display: flex;
}

Answer 2

实现目标的最简洁方法是使用：

li{
list-style-image: url('/my-image')
}

但这意味着您需要在服务器上访问您需要的图像。

另一种方式是：

.fa-download{
  position: absolute;
  margin-left: -1.5em;
}
ul{
  list-style-type: none;
}
a:hover{
  color: red;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <ul>
    <li>
      <a href="#">
        <i class="fa fa-download">     </i>
        <span class="file-title">Link 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr     </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-download">     </i>
        <span class="file-title">Link 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr     </span>
      </a>
    </li>
  </ul>
</body>

使用第二种方法：

删除list-style-type。
使用列表的填充来放置元素
<i class="fa fa-download"></i>位于您的行的开头。
使用position: absolute和margin: -1.5em移动列表填充区域中的图标

HTML5，CSS：在移动设备上正确制作FA图标和链接

2 个答案: