Question

我使用✈作为列表列表说明符，当它在单行时它对我的项目看起来不错，但对于移动视图（在列表的多行中）它看起来有点难看。你有一些补救措施..谢谢

实际观点：

✈这就是我对li标签的问题，请给我一些补救措施。
这就是我对li标签的问题，请给我一些补救措施。

预期观点：

✈这看起来很棒显示
无论如何都要这样做。
✈这看起来很棒显示
无论如何都要这样做。

Answer 1

有几种不同的方法可以实现这一目标。

选项1. CSS Tables

＆＃13;

ul {
  list-style-type: none;
  display: table;
  width: 200px;
  padding: 0;
}

li {
  display: table-row;
}

li:before {
  content: '✈ ';
  padding-right: 5px;
  display: table-cell;
}

＆＃13;

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>

＆＃13;

选项2. absolute和relative职位

＆＃13;

ul {
  list-style-type: none;
  width: 200px;
  padding: 0;
}

li {
  position: relative;
  margin-left: 25px;
}

li:before {
  content: '✈ ';
  position: absolute;
  left: -20px;
}

＆＃13;

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>

＆＃13;

选项3. Flexbox

＆＃13;

ul {
  list-style-type: none;
  width: 200px;
  padding: 0;
}

li {
  display: flex;
}

li:before {
  content: '✈ ';
  margin-right: 5px;
}

＆＃13;

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>

＆＃13;

Answer 2

我找到了一个使用表（没有边框）和bootstrap的简单解决方案。

 <style>
 table tr td{
 vertical-align:top;
 text-align:left;
 }
</style>

<table>
 <tr>
 <td>✈ </td>
 <td>This looks awesome to display</td>
 </tr>
 <tr>
 <td>✈ </td>
 <td>This looks awesome to display</td>
 </tr> 
 </table>

是否可以在li标签中使用不同的列表说明符

2 个答案: