如何将jquery ui菜单栏项放到单行_Jquery_Jquery Ui_Menubar_Jquery Ui Menubar

如何将jquery ui菜单栏项放到单行

jquery jquery-ui

如何将jquery ui菜单栏项放到单行,jquery,jquery-ui,menubar,jquery-ui-menubar,Jquery,Jquery Ui,Menubar,Jquery Ui Menubar,jquery ui菜单栏已添加到应用程序中。每个菜单项从下一行开始，IE9中的项目符号出现在第一列：在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

jquery ui菜单栏已添加到应用程序中。每个菜单项从下一行开始，IE9中的项目符号出现在第一列：

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


$（函数（）{
$（“#bar1”）.menubar({
自动展开：对，
选择：功能（事件、用户界面）{
如果（ui.item.context.href==null）{
//按下回车键
location.href=ui.item[0].firstChild.href；
返回；
}
location.href=ui.item.context.href；
}
});
$（'#bar1'）.css（'display'，'block'）；
});

您的页面未与菜单栏CSS链接。您可以在这里找到它：

您的页面没有与菜单栏CSS链接。你可以在这里找到它：

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