首页 文章

在Wordpress的Breadcrumb NavXT插件中应用样式的问题

提问于
浏览 次
0

我将样式应用于Breadcrumb NavXT插件时遇到了很大的问题 .

当我使用Breadcrumb NavXT插件将样式应用于WP文档中的插件时，最后一段文本始终被前面的彩色箭头覆盖 .

我已经尝试了明显的答案，例如将margin-right应用于最后一个孩子，但没有任何工作 . 真的很感激一些帮助 .

这是WP输出的相关html：

<!-- Breadcrumb NavXT 3.9.0 -->
<a title="Go to Blog." href="http://www.media.co.uk/wp">Blog</a> &gt; 
<a title="Go to Email &#038; SMS Broadcasting." href="http://www.media.co.uk/wp/  
email-sms-broadcasting/">Email &#038; SMS Broadcasting</a> &gt; Data List  
Management        </div><!--END breadcrumb -->

这是相关的CSS：

.breadcrumb{ list-style:none; overflow:hidden; position:absolute; font:10px    
Helvetica,Arial,Sans-Serif; top:160px; float:left}

.breadcrumb a{ color:white;  text-decoration:none;  padding:2px 0 2px 35px;     
background:blue; background:#728c8c; position:relative;  display:block; float:left}

.breadcrumb a:after{ content:"";  display:block;  width:0;  height:0;  
border-top:50px solid transparent;   border-bottom:50px solid transparent;  border-   
left:30px solid #728c8c;  position:absolute;  top:50%;  margin-top:-50px;  left:100%;  
z-index:2}

.breadcrumb a:before{ content:"";  display:block;  width:0;  height:0;  border- 
top:50px solid transparent;  border-bottom:50px solid transparent;  border-left:30px   
solid white;  position:absolute;  top:50%;  margin-top:-50px;  margin-left:1px;  
left:100%;  z-index:1}
.breadcrumb a:first-child { padding-left:10px;}

.breadcrumb a:nth-child(2) {background: #768c72}
.breadcrumb a:nth-child(2):after{border-left-color:#768c72}
.breadcrumb a:nth-child(3) {background: #909673}
.breadcrumb a:nth-child(3):after{border-left-color:#909673}
.breadcrumb a:nth-child(4) {background: #ad7601}
.breadcrumb a:nth-child(4):after{border-left-color:#ad7601}
.breadcrumb a:nth-child(5) {background: #E3E8E8}
.breadcrumb a:nth-child(5):after{border-left-color:#E3E8E8}
.breadcrumb a:nth-child(6) {background: #728c8c}
.breadcrumb a:nth-child(6):after{border-left-color:#728c8c}
.breadcrumb a:nth-child(7) {background: #768c72}
.breadcrumb a:nth-child(7):after{border-left-color:#768c72}
.breadcrumb a:last-child a{background:transparent !important;  color:black;  
pointer-events:none; cursor:default;}
.breadcrumb  a:hover{background:#526476}
.breadcrumb  a:hover:after{border-left-color:#526476 !important}
css wordpress-plugin breadcrumbs

1 回答

  • 1

    你可以在 span 中包装 Data List Management 然后添加css：

    .breadcrumb span {
    float: right;
    padding: 2px 0 2px 20px;
}

    您可以将 float: right 更改为 display: inline ，但这在IE7中不起作用 . 您也可以将其更改为 float: left - 这可能更好 - 但这似乎会导致 &gt; HTML出现问题 .

    编辑

    根据Breadcrumb NavXT Documentation，您可以使用以下代码将当前元素项包装在span中：

    //Set the current item to be surrounded by a span element
$breadcrumb_trail->opt['current_item_prefix'] = '<span>';
//Set the suffix to close the span tag
$breadcrumb_trail->opt['current_item_suffix'] = '</span>';
    回复于

相关问题