html - CSS - 将div插入无序列表的中间

Question

我有一个菜单，它实际上是一个无序列表:

        <ul class="nav navbar-nav">
            <li><a href="#">O nás</a></li>
            <li><a href="#"> Místo</a></li>
            <li><a href="#">Program</a></li>
            <li><a href="#">Svatební dary</a></li>
            <li><a href="#">Fotogalerie</a></li>
            <li><a href="#">formulá</a></li>
            <li><a href="#">na Potvrzení účasti</a></li>
        </ul>

我事先不知道菜单中的元素数，菜单是动态生成的。我需要在菜单中间显示一个带有 Logo 的 div，在 Logo 两侧显示相同数量的元素(或者，如果菜单中的元素数量为 5，则在左侧显示 2，在右侧显示 3 )

            <div>
               <a href="#">
                <div class="logo">Filip a Denisa</div>
                <div id="slogan">21. Srpna 2014</div>
               </a>
            </div>

这种情况是否可以用 CSS3 来实现，还是我需要使用 CSS + JS 或 PHP 来根据需要立即生成菜单？

Answer 1

这只能在页面通过 javascript 或 Jquery 加载后完成，我的 friend ，这是 Jquery 中的一个工作示例，希望对您有所帮助:

$(document).ready(function(){

var liCount = $(".nav.navbar-nav li").length,
    DivCont = '<li>'+
                '<div>'+
                  '<a href="#">'+
                    '<div class="logo">Filip a Denisa</div>'+
                    '<div id="slogan">21. Srpna 2014</div>'+
                  '</a>'+
                '</div>'+
              '</li>';

if(liCount % 2==0){
    var halfCount = liCount / 2;
    $(".nav.navbar-nav li:eq("+ halfCount +")").before(DivCont);
}else{
    var halfCount = Math.floor(liCount / 2);
    $(".nav.navbar-nav li:eq("+ halfCount +")").before(DivCont);
}

});

这是 fiddle :http://jsfiddle.net/qe8dqapa/