1

現在のレンダリング：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>
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 コードのように 3 番目の項目の後に最後の項目を追加することで、メニュー項目を並べ替えることができます

<script>
jQuery(document).ready(function ($) {
  $('ul li:eq(2)').after($('li#logo'));
});
</script>
于 2013-02-22T20:10:09.590 に答える