Question

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

您好，

在下面的示例中，我希望我的徽标元素（id =“logo”）出现在我的第3和第4个li元素之间。也就是说，我想让它看起来完全位于其父级的中心，但仍然与其兄弟姐妹一起驻留在正常的流程中。

我不能简单地将徽标元素放在正确的位置，因为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>

如何使用兄弟姐妹水平居中元素并保留流量？

1 个答案: