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

Question

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

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

平板电脑视图中的对齐分为两列，正如我希望的那样，但是靠近末尾的列表项之一“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 项上的 margin-right 等）

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

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

Unordered list bullet not remaining to the left of the list. Format of list is not working for all devices

html

css

list

html-lists