Question

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

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>

Answer 1

您的网页未与菜单栏CSS相关联。你可以在这里得到它：http://view.jqueryui.com/menubar/themes/base/jquery.ui.menubar.css

Answer 2

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

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

2 个答案: