无序列表项目符号未保留在列表左侧。列表格式不适用于所有设备

Question

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

此外，我将桌面视图中的列表对齐显示为内联块，并且我希望文本对齐显示为与我在代码中输入的一样。我一定在这里遗漏了一些东西，因为它看起来不合理。

平板电脑视图中的对齐方式分为两列，因为我希望它是这样的，但是靠近末端的列表项“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>

Answer 1

更新：在 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) 和 flex-direction 列中添加一个 flex 显示，这样无论屏幕的宽度如何，它都会垂直显示。我还删除了您的实验性媒体标签，因为我认为不需要它。最后，我为您的列表项添加了双水平边距。有什么问题吗？