Question

这让我疯了，我无法弄清楚原因。我有一个连接到bootstrap的JSP应用程序。首先，我绝不是CSS的专家，在这方面我是绿色的。我的问题是内联块不起作用。我的引导程序用于折叠插件，允许我使用菜单按钮而不是智能手机中的常规菜单。当我使用桌面大小时，菜单项以块格式（垂直）显示，即使我使用了display：inline-block。这是我的代码，如果有人知道为什么内联块不起作用，请告诉我。

html：

 <ul id="menu-items" class="navbar-collapse collapse menubar-items">
                <li>
                    <a class="menuItems" href="home.jsp">Home</a>
                </li>
                <li>
                    <a class="menuItems" href="business.jsp">Business</a>
                </li>
                <li>
                    <a class="menuItems" href="new-form.jsp">New Order</a>
                </li>
                <li>
                    <a class="menuItems" href="logout.do">Logout</a>
                </li>
            </ul>

css：

#menu-items {
    min-width: 250px;
    background: #CFC3F8;
    box-shadow: 5px 5px 2px #888888;
    padding: 0;
    float: right;
}

#menu-items li {
    height: 100%;
    width: 100%;
    margin-right: 10px;
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    line-height: 60px;
    font-size: 16px;
    border-left: solid white 2px;
    color: #332419;

    //The attempt
    display: inline-block;
}

#menu-items li a.menuItems {
    height: 100%;
    width: 100%;
}

#menu-items li a.menuItems:hover {
    color: #332419;
    background-color: #f1f1f1;
}

//ensuring that bootstrap doesn't override it

.navbar-collapse li {
    display: inline-block;
    text-decoration: none;
}

.collapse li {
    display: inline-block;
    text-decoration: none;
}

ul li {
    display: inline-block;
    text-decoration: none;
}

显示：内联块被忽略

0 个答案: