仅将 css 实现到父元素

Question

我目前正在开发一个导航菜单，其中任何不适合可用空间的菜单项都会附加到一个隐藏的无序列表（ ul ）上，该列表可以通过切换按钮访问。 我想要实现的是将Group-1 、 Group-2 ...作为inline-block而不影响子元素的 css。我试图在 css 下使用；

.hidden-link{
    display:inline-block;
}

但是，当我使用这一行时，它会将所有子元素的属性更改为连续显示，而不是以表格格式显示。 我也尝试过 jquery，但没有成功。

$(document).ready(function(){
    $("ul.hidden-links").children().css("display","inline-block");
}); 

例如

<div class="container">
    <ul class='hidden-links hidden'>
        <li>Group1
            <ul class ="flash">
                <li>item-1</li>
                <li>item-1</li>
                <li>item-1</li>
            </ul>
        </li>
        <li>Group2
            <ul class ="flash">
                <li>item-1</li>
                <li>item-1</li>
                <li>item-1</li>
            </ul>
        </li>
        <li>Group3
            <ul class ="flash">
                <li>item-1</li>
                <li>item-1</li>
                <li>item-1</li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

如果我理解正确，您只需要选择菜单的直接子项。

那么这就是你所需要的。

$(document).ready(function(){
    $("ul.hidden-links > li").css("display","inline-block");
}); 

Answer 2

如果您希望每个元素都显示在单独的行上，那么您应该使用display: block而不是 `inline-block'。

有关inline-block更多信息，请访问 http://www.w3schools.com/css/css_inline-block.asp

Answer 3

您可以使用简单的 css 技巧来解决这个问题。 在不同的 css 中设计了两个 ul。

.hidden-links li{
  display: inline-block;
 }
 li .flash li{
  display: block;
 }