列表左侧没有未排序的项目符号列表格式不适用于所有设备

问题描述

无论屏幕大小是多少，我都希望此无序列表中的自定义项目符号保留在每个列出的项目的左侧。在电话视图中，它似乎位于列表项的顶部。

此外，我在桌面视图中放置的列表对齐方式作为内联块显示，并且我希望文本对齐方式与代码中的显示方式一样合理。我必须在这里丢失一些东西，因为它看起来不合理。

在平板电脑视图中，对齐方式按照我希望的方式分为两列，但是靠近末端的列表项“ chits”之一向右喷射一点，即使它没有超过长度第一列的我只希望“更多”在列表下方弹出（如我所设置的左边距）。

.listexamples {
    list-style-type: none;
}

.listexamples {
    display: inline-block;
    padding-right: 15px;
    margin-right: 30px;
    text-align: justify;
    position: relative;
 }

.listexamples::before {
    content: "•";
    color: #FFEC6C;
    vertical-align: center;
  display: inline-block;
    width: 1em;
    margin-left: 1em;
}

/*experimental media tag*/
@media(max-width: 790px) {
  ul {
        display: 100% ;
        font-size:14px;
        margin-left: 0px;
        margin-right: 0px;
        padding: none;
    column-count: 2;

    }
    
}

.more {
    margin-left: 40px;
}

<div class="wrap">
  <div class="center"><h2>Examples of what I can provide</h2>
<ul>
    <li class="listexamples">Branded polos</li>
    <li class="listexamples">Custom t-shirts</li>
    <li class="listexamples">Branded mugs</li>
    <li class="listexamples">Business cards</li>
    <li class="listexamples">Branded pens</li>
    <li class="listexamples">Newsletters</li>
    <li class="listexamples">Printed menus</li>
   <li class="listexamples">Printed fliers</li>
    <li class="listexamples">Chits</li>
<p class="more">and more!</p>
</ul>

解决方法

更新：在Codepen版本here中添加了响应支持；下面的代码未更新 。

原始答案：

这是我认为可以使用的代码，我将在下面进行解释。

ul {
    list-style-type: none;
  display:flex;flex-direction:column;
}

.listexamples {
 }

.listexamples::before {
    content: "•";
    color: red;
    width: 1em;
    margin:0 1em;
}

<div class="wrap">
  <div class="center">
    <h2>Examples of what I can provide</h2>
<ul>
    <li class="listexamples">Branded polos</li>
    <li class="listexamples">Custom t-shirts</li>
    <li class="listexamples">Branded mugs</li>
    <li class="listexamples">Business cards</li>
    <li class="listexamples">Branded pens</li>
    <li class="listexamples">Newsletters</li>
    <li class="listexamples">Printed menus</li>
    <li class="listexamples">Printed fliers</li>
    <li class="listexamples">Chits</li>
</ul>
  
<p class="more">and more!</p>

所以我稍微清理了一下代码，由于几行代码无效，所以我删除了它们（例如li项的右边距等）

因此，这里的主要思想是将柔性显示添加到无序列表（ul）和柔性方向列，以便无论屏幕的宽度如何，它都将垂直显示。我还删除了您的实验性媒体标签，因为我认为这不是必需的。最后，我为您的列表项添加了一个水平双边距。有什么问题吗？