0

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

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>
4

2 回答 2

1

赋予display属性以a在同一行中断

ul li a {
    display: flex;
}
于 2018-03-09T10:45:04.687 回答
0

实现您想要的最干净的方法是使用：

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移动列表填充区域中的图标
于 2018-03-09T11:33:24.180 回答