在另一个
内继承风格

发布于 2024-10-11 17:23:10 字数 847 浏览 6 评论 0原文

我在一些 HTML 中具有以下结构：

<ul class="li_inline">
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
</ul>

使用这样的 CSS：

.li_inline li
{
    display: inline;
}

.li_block li
{
    display: block;
}

我希望发生的情况是让两个内部

并排，但任何 < li> 在它们内部，彼此位于下面。这样我就可以并排获得侧边栏和主体，但其中的元素表现正常（即一个在另一个之下）。

有人可以建议我使用一些 CSS，以便内部 (li_block) 列表的

元素显示为块元素，但

;

谢谢，

詹姆斯

原文

I have the following structure in some HTML:

<ul class="li_inline">
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
</ul>

With the CSS like this:

.li_inline li
{
    display: inline;
}

.li_block li
{
    display: block;
}

What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).

Can someone suggest some CSS I can use so that the inner (li_block) lists' <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?

Thanks,

James

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

生生不灭 2024-10-18 17:23:10

使用重置规则。

ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }

在您的情况下，使用 !important 可以完成您的工作。但尽量不要使用它

更新解决

方案： http://jsfiddle.net/Starx/KHjmP/ ( FF3+、Safari 4+、IE8+)

Use a reset rule.

ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }

In your case using the !important can get your job done. But try not to use it

UPDATE

Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)

回复收藏 0 原文

挽你眉间 2024-10-18 17:23:10

它不漂亮，但你明白了它的要点:)

<div style="overflow: hidden;">
        <ul class="li_block" style="float: left;">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
        <ul class="li_block" style="float: left;">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
</div>

it ain't pretty but you get the jist of it :)

<div style="overflow: hidden;">
        <ul class="li_block" style="float: left;">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
        <ul class="li_block" style="float: left;">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
</div>

回复收藏 0 原文

蹲在坟头点根烟 2024-10-18 17:23:10

这对我有用：

<html>
    <head>
        <style type="text/css">
        ul.outer{}

        ul.outer > li{
            float: left;
        }

        ul.outer > li > ul > li{
            display: block;
        }

        </style>
    </head>
    <body>
        <ul class="outer">
            <li>
                <ul>
                    <li>1.1</li>
                    <li>1.2</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>2.1</li>
                    <li>2.2</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

This worked for me:

<html>
    <head>
        <style type="text/css">
        ul.outer{}

        ul.outer > li{
            float: left;
        }

        ul.outer > li > ul > li{
            display: block;
        }

        </style>
    </head>
    <body>
        <ul class="outer">
            <li>
                <ul>
                    <li>1.1</li>
                    <li>1.2</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>2.1</li>
                    <li>2.2</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

回复收藏 0 原文

放肆 2024-10-18 17:23:10

您应该能够执行如下简单的操作。我在 Firefox、Chrome 和 IE7 中进行了测试。

.li_inline > li {
    display: inline;
}
.li_inline > li > ul  {
    float: left;
}

http://jsfiddle.net/fzBnG/

You should be able to do something as simple as the following. I tested it in Firefox, Chrome and IE7.

.li_inline > li {
    display: inline;
}
.li_inline > li > ul  {
    float: left;
}

http://jsfiddle.net/fzBnG/

回复收藏 0 原文

老旧海报 2024-10-18 17:23:10

.li_inline li {
    display: inline-block;
    float: left;
}

.li_block li {
    display: block;
    clear:both; 
}

.li_inline li {
    display: inline-block;
    float: left;
}

.li_block li {
    display: block;
    clear:both; 
}

回复收藏 0 原文

断舍离 2024-10-18 17:23:10

首先感谢大家的帮助！我真的很抱歉看起来我忽略了您的辛勤努力，但我已经记下了您的所有答案，而且它们都非常方便。

我想出的解决方案是简单地对两个内部的 ul 使用 display: inline-block ，而外部的则保留默认值。

再次感谢大家的帮助。

詹姆斯

回复收藏 0 原文

~没有更多了~

关于作者

与酒说心事

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

在另一个
内继承风格

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

更新解决

UPDATE

关于作者

相关话题

热门标签

推荐作者

葬花如无物

nick

来世叙缘

凉城已无爱

樱桃奶球

梦中的蝴蝶

友情链接

在另一个内继承风格

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

更新解决

UPDATE

关于作者

相关话题

热门标签

推荐作者

葬花如无物

nick

来世叙缘

凉城已无爱

樱桃奶球

梦中的蝴蝶

友情链接

在另一个
内继承风格

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。