HTML5、CSS：使 FA 图标和 link 在移动设备上正确断开

Question

当第一行在移动设备中中断时，我想让第二行从第一行开始的地方开始。知道如何在列表中找到这个吗？

<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 图标和 link 在移动设备上正确断开

HTML5, CSS: Make FA icon and link break correctly on mobile

html

css

font-awesome-5