1. 首頁
  2. 問答
  3. 如何把jquery ui菜單項添加到單行

如何把jquery ui菜單項添加到單行

2012-12-09 33 views
0

jquery ui菜單欄添加到應用程序中。 每個菜單項，在IE9開始於下一行，子彈出現在第一列：如何把jquery ui菜單項添加到單行

enter image description here

在Firefox子彈每一個菜單項之前出現。

如何強制同一行中的所有菜單欄物品？

頁來源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> 
<link href="../../Content/Css/Site.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="/Scripts/jquery/jquery-1.8.3.js"></script> 
<script src="/Scripts/jquery-ui-1.9.2.custom.js" type="text/javascript"></script> 
<script type="text/javascript" src="/Scripts/menubar.js"></script> 
<script type="text/javascript"> 
$(function() { 
      $("#bar1").menubar({ 
      autoExpand: true, 
       select: function (event, ui) { 
        if (ui.item.context.href == null) { 
         // Enter is pressed 
         location.href = ui.item[0].firstChild.href; 
         return; 
        } 
        location.href = ui.item.context.href; 
       } 
      }); 
      $('#bar1').css('display', 'block'); 
     }); 
    </script> 
</head> 
<body> 
    <div id="container"> 
    <ul id="bar1"> 
    <li><a href="#About">About</a></li> 
    <li> 
     <a href="#File">File</a> 
     <ul> 
      <li><a href="#Open...">Open...</a></li> 
      <li class="ui-state-disabled"><a href="#">Open recent...</a></li> 
      <li><a href="#Save">Save</a></li> 
      <li><a href="#Save%20as...">Save as...</a></li> 
      <li><a href="#Close">Close</a></li> 
      <li><a href="#Quit">Quit</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#Edit">Edit</a> 
     <ul> 
      <li><a href="#Copy">Copy</a></li> 
      <li><a href="#Cut">Cut</a></li> 
      <li class="ui-state-disabled"><a href="#">Paste</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#View">View</a> 
     <ul> 
      <li><a href="#Fullscreen">Fullscreen</a></li> 
      <li><a href="#Fit%20into%20view">Fit into view</a></li> 
      <li> 
       <a href="#Encoding">Encoding</a> 
       <ul> 
        <li><a href="#Auto-detect">Auto-detect</a></li> 
        <li><a href="#UTF-8">UTF-8</a></li> 
        <li> 
         <a href="#UTF-16">UTF-16</a> 
         <ul> 
         <li><a href="#Option%201">Option 1</a></li> 
         <li><a href="#Option%202">Option 2</a></li> 
         <li><a href="#Option%203">Option 3</a></li> 
         <li><a href="#Option%204">Option 4</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#Customize...">Customize...</a></li> 
     </ul> 
    </li> 
     </ul>

來源

2012-12-09 Andrus

回答

0 
ul#bar1 
{ 
list-style: none; 
padding: 0; 
margin: 0; 
} 

ul#bar1 li 
{ 
float: left; 
margin: 0 0.15em; 
} 

ul#bar1 li a 
{ 
height: 2em; 
line-height: 2em; 
float: left; 
width: 9em; 
display: block; 
text-decoration: none; 
text-align: center; 
}

來源

2012-12-09 22:52:48 Theodore

相關問題

 相關問題