CSS - 插入Div成无序列表

我有一个菜单，这实际上是一个无序列表的中间：CSS - 插入Div成无序列表

 <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>

我不知道事先的菜单项的数量，生成菜单dynammicaly。我需要在菜单中间显示带有标志的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生成菜单马上根据需要？该页面由JavaScript或jQuery的载入我的朋友后

来源

2014-11-20 user1049961

您可能必须在JS或后端执行此操作。 – 2014-11-20 17:57:51

通过任何计算生成菜单的方式，您可以计算UL中LI的数量。并且可以在某个点插入该DIV。是的，可以用JS – 2014-11-20 17:57:55

完成你也应该知道，你不能把一个div放在'ul'里面。它必须用“li”包装。 – 2014-11-20 18:49:29

这只能做，这里是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/

来源

2014-11-20 22:52:26

这是jQuery，而不是Jquery :) – 2014-11-20 23:26:20

我为错误道歉:) – 2014-11-20 23:30:13

CSS - 插入Div成无序列表

回答

相关问题