html - 未显示 li 的列表样式图像
问题描述
我目前正在使用 HTML 和 CSS 中的自定义列表,所以我尝试使用自定义图像用于li
“点”。但是,它没有显示。有人可以告诉我这个代码片段有什么问题吗?
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
height:100vh;
background-color: white;
}
.container > div {
min-height: 100vh;
border: 1px solid black;
box-sizing:border-box;
background-color: inherit;
}
container > div .content{
height: 100vh;
width: 100vw;
background-color: inherit;
}
.full-width {
width:100%;
}
.half-width {
width:50%;
}
.half-width > .half-width-content{
position: relative;
margin-top: 0;
height: 100%;
width: 100%;
}
list-div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list-div ul {
padding: 0;
width: 75%;
}
.list-div li {
position: relative;
margin-bottom: 5px;
padding: 10px;
text-align: left;
visibility: visible;
text-transform: uppercase;
}
.list-div li:nth-child(1){
list-style-image: url('https://fakeimg.pl/30x30/?text=A');
list-style-position: outside;
}
<div class="container">
<div class="half-width">
<div class="half-width-content">
<div class="list-div">
<ul class="items-list" id="list">
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
<li>List item D</li>
</ul>
</div>
</div>
</div>
</div>
</div>
解决方案
使用 list-style-type: none;
和
margin-left:40px;
_li
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
height:100vh;
background-color: white;
}
.container > div {
min-height: 100vh;
border: 1px solid black;
box-sizing:border-box;
background-color: inherit;
}
container > div .content{
height: 100vh;
width: 100vw;
background-color: inherit;
}
.full-width {
width:100%;
}
.half-width {
width:50%;
}
.half-width > .half-width-content{
position: relative;
margin-top: 0;
height: 100%;
width: 100%;
}
list-div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list-div ul {
padding: 0;
width: 75%;
}
.list-div li {
position: relative;
margin-bottom: 5px;
padding: 10px;
text-align: left;
visibility: visible;
text-transform: uppercase;
list-style-type: none;
margin-left:40px;
}
.list-div li:nth-child(1){
list-style-image: url('https://fakeimg.pl/30x30/?text=A');
list-style-position: outside;
}
<div class="container">
<div class="half-width">
<div class="half-width-content">
<div class="list-div">
<ul class="items-list" id="list">
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
<li>List item D</li>
</ul>
</div>
</div>
</div>
</div>
</div>
编辑到您的评论中心li
,image
使用如下.list-div li:nth-child(1)
background: url(https://fakeimg.pl/30x30/?text=A);
list-style-type: none;
margin: 0;
padding: 10px 10px 10px 48px;
vertical-align: middle;
background-repeat: no-repeat;
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
height:100vh;
background-color: white;
}
.container > div {
min-height: 100vh;
border: 1px solid black;
box-sizing:border-box;
background-color: inherit;
}
container > div .content{
height: 100vh;
width: 100vw;
background-color: inherit;
}
.full-width {
width:100%;
}
.half-width {
width:50%;
}
.half-width > .half-width-content{
position: relative;
margin-top: 0;
height: 100%;
width: 100%;
}
list-div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list-div ul {
padding: 0;
width: 75%;
}
.list-div li {
position: relative;
margin-bottom: 5px;
padding: 10px;
text-align: left;
visibility: visible;
text-transform: uppercase;
list-style-type: none;
margin-left:40px;
}
.list-div li:nth-child(1){
background: url(https://fakeimg.pl/30x30/?text=A);
list-style-type: none;
margin: 0;
padding: 10px 10px 10px 48px;
vertical-align: middle;
background-repeat: no-repeat;
}
<div class="container">
<div class="half-width">
<div class="half-width-content">
<div class="list-div">
<ul class="items-list" id="list">
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
<li>List item D</li>
</ul>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- java - Unreachable statement Error While inflating a fragment view
- reactjs - React typescript 将 props 接口传递给类组件
- java - 从 RecyclerView 中删除多个选定项目
- javascript - Screenleap API 与 Reactjs 的集成
- asp.net-core-mvc - 如何让 TagHelper 只呈现没有父标签的纯文本?
- c++ - 模板类错误:未定义的引用
- java - 如何在警报对话框中保存多选状态?
- jquery - Shopify 预测搜索 JQuery GET 运行两次
- java - Java、Selenium、Chrome - 无法单击按钮,即使它似乎能够找到它就好了
- android-studio - 在 IntelliJ IDEA (Android Studio) 中声明后是否可以在同一行上编写 JavaDoc?