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>

我事先不知道菜单中的项目数，菜单是动态生成的。我需要在菜单中间显示带徽标的div，徽标两侧的项目数量相同（或者，如果菜单中的项目数量为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我的朋友加载页面之后才能完成，这里是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);
}

});

这是小提琴：http://jsfiddle.net/qe8dqapa/

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

1 个答案: