1

当前渲染： 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>
4

1 回答 1

0

作为 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>
于 2013-02-22T20:10:09.590 回答