为什么这样:元素受到换行影响?

时间:2011-07-12 12:15:36

标签: css webkit pseudo-element

我有一个像这样编码的简单菜单

<ul id="main-menu" class="container">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Villas & Yachts</a></li>
    <li><a href="#">Islands</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Get In Touch</a></li>       
 </ul>

看起来像这样 enter image description here

使用:after伪元素创建每个菜单项之间的小点。 Eveything工作正常,但我还需要子菜单,这将是嵌套列表。

问题是,当我在这样的菜单中添加换行符时

<ul id="main-menu" class="container">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Villas & Yachts</a>
    <!-- LINE BREAK -->
    </li>
    <li><a href="#">Islands</a>
    <!-- LINE BREAK -->
    </li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Get In Touch</a></li>       
 </ul>

我在Safari&amp; Chrome(但不是Firefox)...... enter image description here

在我看来,好像webkit将空白视为'pre'。 :after元素的CSS看起来像这样

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;
}

我也尝试在ul,li和:after元素上设置white-space: normal/nowrap,不影响任何事情。

任何人都可以看到我出错的地方,或者这是Webkit / Firefox的问题吗?

更新

我在http://jsfiddle.net/zmVbH/

创建了一个演示版

1 个答案:

答案 0 :(得分:5)

问题是换行符是空白区域,这会使浮动内容掉线。可以通过在</a></li>之间添加单个空格来重现该问题。尝试制作插入的内容display:inline-block,而不是浮动。

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    display:inline-block;
    text-align: center;
    border: rgba(0,0,0,0.25) 1px solid;
    white-space: normal;        
}

更新了JSFiddle

OP更新

是的,内联块修复了这个问题,但由于内联块有一些不完整的浏览器支持,所以它并不那么简单。

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;

    /* FIX */
    display:-moz-inline-stack; /* For older versions of Firefox */ 
    display:inline-block; /* Anything that supports inline-block */

    /* IE FIX */
    zoom:1;
    *display:inline; 
}