痕迹导航元素未居中对齐

Question

我使用了

我也试过div style="text-align:center;"就在下面和前面，但似乎也不管用。

breadcrumb-campaign-background的CSS样式如下:

.breadcrumb-campaign li {
font-size: 14px !important; 
margin: 0 auto; 
text-align: center;
}
.breadcrumb-campaign-background {
background-color: #111 !important; 
margin-bottom: -70px; 
margin-left: -15px;
}
.breadcrumb-campaign-background-first {
background-color: #111 !important; 
margin-left: 125px; 
margin-bottom: -70px;
}

<div class="container-700">
<div class="maison breadcrumb-campaign container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-campaign-background" style="text-align: center">
<li class="breadcrumb-item"><a href="#stopcoopspying">Stop Co-op Spying</a></li>
<li class="breadcrumb-item"><a href="#email">Email Co-Op Now</a></li>
<li class="breadcrumb-item"><a href="#take-action">Spread the Word</a></li>             
<li class="breadcrumb-item"><a href="#email">Take Action</a></li>   
<li class="breadcrumb-item"><a href="#leaflet">Get the Leaflet</a></li>
</ol>
</nav>
</div>
</div>

Answer 1

如果我正确理解了您的问题，请使用以下代码。你觉得这样行吗?

.breadcrumb-campaign li {
font-size: 14px !important;
margin: 0 auto;
text-align: center;
list-style-type: none;
display: inline-block;
margin: 20px 0px;
}
.breadcrumb-campaign li:not(:last-child)::after {
/*   You may use arrow icon here */
content: ">";
margin: 0 5px;
}

Codepen链接