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成無序列表

回答

相關問題