gpt4 book ai didi

html - 如何储存 |在 HTML 中?

转载 作者:太空宇宙 更新时间:2023-11-04 00:37:33 25 4
gpt4 key购买 nike

我想知道使用 | 的最佳实践是什么,即我是将它包装在 div 类中还是将其存储在 span 标签中?基本上我想要实现的是以下内容。

Ask a question | Privacy | Statement

<!DOCTYPE html>
<html>
<body>

<footer role="contentinfo">
<div class="footer-bottom hidden-print">
<div class="Container">
<div class="row">
<div class="col-12">

<ul class="list list--inline" role="menu" aria-label="Navigation">
<li role="menuitem" aria-label="Ask a question">
<a href="/question" title="Ask a question">Ask a question</a>&nbsp; |
</li>
<li role="menuitem" aria-label="Privacy">
<a href="/privacy" title="Privacy">Privacy</a>&nbsp; |
</li>
<li role="menuitem" aria-label="Statement">
<a href="/test" title="Statement">Statement</a>
</li>
</ul>

</div>
</div>
</div>
</div>

</footer></body>

</html>

请指教。

最佳答案

根本不需要特殊字符。

只需使用右边框...

ul {
display:flex;
justify-content:center;
list-style:none;
}

li {
padding:0 1em;
}

li:not(:last-child) {
border-right:3px solid red;
}
<footer role="contentinfo">
<div class="footer-bottom hidden-print">
<div class="Container">
<div class="row">
<div class="col-12">

<ul class="list list--inline" role="menu" aria-label="Navigation">
<li role="menuitem" aria-label="Ask a question">
<a href="/question" title="Ask a question">Ask a question</a>
</li>
<li role="menuitem" aria-label="Privacy">
<a href="/privacy" title="Privacy">Privacy</a>
</li>
<li role="menuitem" aria-label="Statement">
<a href="/test" title="Statement">Statement</a>
</li>
</ul>

</div>
</div>
</div>
</div>

</footer>

或者,使用伪元素

ul {
display: flex;
justify-content: center;
list-style: none;
}

li {
padding: 0 1em;
position: relative;
}

li:not(:last-child):after {
content: "";
position: absolute;
right: 0;
top: 10%;
height: 80%;
width: 3px;
background: green;
}
<footer role="contentinfo">
<div class="footer-bottom hidden-print">
<div class="Container">
<div class="row">
<div class="col-12">

<ul class="list list--inline" role="menu" aria-label="Navigation">
<li role="menuitem" aria-label="Ask a question">
<a href="/question" title="Ask a question">Ask a question</a>
</li>
<li role="menuitem" aria-label="Privacy">
<a href="/privacy" title="Privacy">Privacy</a>
</li>
<li role="menuitem" aria-label="Statement">
<a href="/test" title="Statement">Statement</a>
</li>
</ul>

</div>
</div>
</div>
</div>

</footer>

关于html - 如何储存 |在 HTML 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59092944/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com