我在将样式应用到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> >
<a title="Go to Email & SMS Broadcasting." href="http://www.media.co.uk/wp/
email-sms-broadcasting/">Email & SMS Broadcasting</a> > 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}
答案 0 :(得分:1)
您可以将Data List Management
包裹在span
中,然后添加css:
.breadcrumb span {
float: right;
padding: 2px 0 2px 20px;
}
您可以将float: right
更改为display: inline
,但这在IE7中无效。您也可以将其更改为float: left
- 这可能更好 - 但这似乎会导致>
HTML出现问题。
根据Breadcrumb NavXT Documentation,您可以使用以下代码将当前元素项包装在范围中:
//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>';