0

我有一些用于样式的类，它们都使用块模式显示。我想将它们全部转换为内联。有没有一种简单的方法可以将它们全部转换为内联，而不是手动转到每个类将它们单独转换为内联...

您的代码部分：

<div class="contentbody">
    <p>
        Register here!
    </p>
    <a href="{% url 'parent_register_step1' %}"
       class="bbutton textshadowclass boxshadow">
        <div class="boxshadowinset green">
            Register
        </div>
    </a>
    <p>
        Forgot your password?
    </p>
    <a href="{% url 'parent_forgot_password' %}"
       class="bbutton textshadowclass boxshadow">
        <div class="boxshadowinset green">
            Reset Password
        </div>
    </a>
</div>

我想将类 bbutton、textshadowclass、box shadow、boxshadowinset green 更改为 inline .. 最简单的方法是什么？

注意：此类在页面的其他部分中使用。我想将某个部分更改为仅内联。它不应该影响整个页面......

让我更详细地解释一下我在做什么： 在此处输入图像描述

我想将其转换为内联，以便注册和重置密码出现在同一行...

4

2 回答 2

1

要仅选择不是类的contentbody类，您需要一个CSS element>element Selector：

div.contentbody>.bbutton, div.contentbody>.textshadowclass, ... {
  display: inline;
}

（如果您希望其他课程也包括在内，请在列表中添加更多课程）

附加说明：如果您永久需要这些类是内联的，那么我建议只（一次）进入每个类并为每个元素添加一个内联类，从长远来看，这会使您的代码更清晰。

编辑：

使用联合选择器（对不起，我找不到更官方的链接）来选择具有多个类集的元素：

div.contentbody>.boxshadowinset.green {
  display: inline;
}

注意和之间的（.没有空格）boxshadowinsetgreen

我确实相信现代浏览器支持这一点，但 IE6 似乎确实存在一些问题。

于 2012-06-21T08:10:01.100 回答
1

一种方法是将 id 应用于您的包装元素。

<div class="contentbody" id="contentbody">

然后在你的CSS中，添加样式

div#contentbody a, div#contentbody div{ display: inline; }

由于 CSS 元素层次结构，它们都将采用内联样式而不是自己的样式。

这里的基本示例。http://jsfiddle.net/H97c5/2/

于 2012-06-21T08:15:57.817 回答