如何解决列表左侧没有未排序的项目符号列表格式不适用于所有设备
无论屏幕大小是多少,我都希望此无序列表中的自定义项目符号保留在每个列出的项目的左侧。在电话视图中,它似乎位于列表项的顶部。
此外,我在桌面视图中放置的列表对齐方式作为内联块显示,并且我希望文本对齐方式与代码中的显示方式一样合理。我必须在这里丢失一些东西,因为它看起来不合理。
在平板电脑视图中,对齐方式按照我希望的方式分为两列,但是靠近末端的列表项“ 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)和柔性方向列,以便无论屏幕的宽度如何,它都将垂直显示。我还删除了您的实验性媒体标签,因为我认为这不是必需的。最后,我为您的列表项添加了一个水平双边距。有什么问题吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。