css - 如何创建 CSS 样式的文本“标签”(不是 html 标签标签)?
问题描述
我正在尝试创建一些如下所示的 CSS 文本“标签”:https ://imgur.com/a/eK1seSa
我采用了一些我在网上找到的代码并开始将其构建为<ul>
列表,但它无法正确显示。一切都以错误的顺序堆叠。
也许我的列表方法是完全错误的。
你知道我应该使用什么代码来实现与示例图片相同的外观吗?
.list {
margin: 0;
padding: 0;
list-style-type: none;
}
.list li {
position: relative;
float: left;
background: #eee;
border-left: 1px solid #fff;
margin-right: 10px;
}
.triangle, .triangle2 {
display: block;
position: absolute;
top: 0;
right: -10px;
height: 0;
width: 0;
border-top: 15px solid transparent;
border-left: 10px solid #eee;
border-bottom: 15px solid transparent;
z-index: 1;
}
.triangle2 {
border-left-color: white;
left: 0;
}
a {
letter-spacing: 1px;
line-height: 30px;
padding: 0 20px 0 30px;
color: #111111;
text-decoration: none;
cursor: default;
}
<ul class="list">
<li>
<span class="triangle2"></span>
<a href="#">Some text</a>
<span class="triangle after"></span>
</li>Some other text
<li>
<span class="triangle2"></span>
<a href="#">Some text</a>
<span class="triangle after"></span>
</li>Some other text
</ul>
解决方案
我看到您没有在li
. 每个都li
应该有完整的数据,以遵循编码标准。
我已经修改了li
包装中的所有文本li
并在css中进行了更改
我在用着display: inlnie-block
这是工作示例
-帮助 :)