html - 我怎样才能水平居中有 sibling 的元素，并保持流动？

Question

当前渲染:http://i.imgur.com/UNPCOfc.png
所需渲染:http://i.imgur.com/8t6c2XM.png

你好，

在下面的示例中，我希望我的 Logo 元素 (id="logo") 出现在我的第 3 个和第 4 个 li 元素之间。也就是说，我想让它恰好出现在其父项的中心，但仍与其兄弟项一起位于正常流中。

我不能简单地将 logo 元素放在正确的位置，因为 li 元素是自动生成的并且数量未知。

如果可能，最好使用纯 CSS 解决方案。

谢谢!

<style type="text/css">
ul {
    width: 100%;
    display: table;
}

li {
    display: table-cell;
}

#logo {
    width: 100px;
    height: 100px;
    background-color: black;
}
</style>
<ul>
    <li>Nav 1</li>
    <li>Nav 2</li>
    <li>Nav 3</li>
    <li>Nav 4</li>
    <li>Nav 5</li>
    <li>Nav 6</li>
    <li id="logo"></li>
</ul>

Answer 1

作为 CSS 解决方案，您可以像下面的代码那样做:

注意:需要为每个li元素添加不同的id属性

<style type="text/css">
ul {
    display: block;
    width: 700px;
    overflow: hidden;
    zoom: 1;
}

li {
  width: 100px;
}

li#menu-item-80,
li#menu-item-81,
li#menu-item-82,
li#logo {
    float: left;
}

li#menu-item-83,
li#menu-item-84,
li#menu-item-85 {
    float: right;
}


#logo {
    width: 100px;
    height: 100px;
    background-color: black;
}
</style>
<ul>
    <li id="menu-item-80">Nav 1</li>
    <li id="menu-item-81">Nav 2</li>
    <li id="menu-item-82">Nav 3</li>
    <li id="menu-item-83">Nav 4</li>
    <li id="menu-item-84">Nav 5</li>
    <li id="menu-item-85">Nav 6</li>
    <li id="logo"></li>
</ul>

作为 Javascript jQuery 解决方案，您可以通过将最后一项附加在第三项之后作为以下 jQuery 代码来重新排序菜单项

<script>
jQuery(document).ready(function ($) {
  $('ul li:eq(2)').after($('li#logo'));
});
</script>