css - 尝试将 css 三 Angular 形用于导航链接，但由于截断不能将它们与 span 一起使用？

Question

我想使用 css 三 Angular 形(例如 http://css-tricks.com/snippets/css/css-triangle/ 或 http://davidwalsh.name/css-triangles )作为导航链接 -

但它们被“切碎”并且不像 http://jsfiddle.net/DBK35/ 中那样是三 Angular 形

    #arrow-left {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent; 
         border-left:0px  solid transparent;        
    border-right:8px solid blue; 
}     
#arrow-right {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid blue;
}
.aaa {
  display: block;
     width: 100px;      
    height: 100px; 
} 

它们是带有 div 的三 Angular 形，即 http://jsfiddle.net/43RCf/

#arrow-left {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent; 
         border-left:0px  solid transparent;        
    border-right:8px solid blue; 
}     
#arrow-right {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid blue;
}
.aaa {
  display: block;
     width: 100px;      
    height: 100px; 
}

但我不想要那些 div 的换行符，我想要一个导航栏:
“左箭头”图像“右箭头”

Answer 1

将display: inline-block添加到#arrow-left和#arrow-right。

http://jsfiddle.net/thirtydot/43RCf/2/