如何使用 CSS 或 jQuery 选择器更改命名 div 中的嵌套 div 以显示为 display:inline？答案

【问题标题】：How to change nested divs within a named div to display as display:inline using CSS or jQuery selectors?如何使用 CSS 或 jQuery 选择器更改命名 div 中的嵌套 div 以显示为 display:inline？
【发布时间】：2011-03-15 21:11:56
【问题描述】：

我遇到了一个问题，我需要能够根据它们是否嵌套在特定 div 中来更改一系列 div 以使用“显示：内联”，但是我无法确定如何选择所有子分区。也许有一个简单的 CSS 方法来完成这个，但我会更详细地描述这个问题。

我有一个使用控件套件的 Web 应用程序，我没有编程访问权限来更改控件使用的类/结构，但最终它们输出 HTML、JavaScript 等并进入 DOM .该套件将控件包装在一个 div 中，该 div 被解释为一个块 div（因为没有指定 display:value），这在图像或图标显示在控件旁边的情况下会导致问题，例如一个帮助图标，因为 div 默认呈现为块而不是内联。站点的其余部分仍需要将 div 视为块。

有什么方法可以让添加的 div 添加 style="display: inline;"到它试图通过 jQuery 或 CSS 包装的所有项目？

在下面的示例中，ctl00_ContentPlaceHolder1_Area 内/下方的所有 div 通常都需要更改为 display: inline，但更具体地说，以 ctl00_ctl00_ContentPlaceHolder1_* 开头并位于名为 ctl00_ContentPlaceHolder1_Area 的 div 内的 div。

<div id="ctl00_ContentPlaceHolder1_Area"><div id="ctl00_ctl00_ContentPlaceHolder1_TextBox1Panel">
        <input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" onchange="javascript:setTimeout('WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$TextBox1", "", true, "", "", false, true))', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;javascript:$radIE.keyPress(event);" id="ctl00_ContentPlaceHolder1_TextBox1" class="RadInputMgr_Office2007 RadInput_Enabled_Office2007" onmouseover="javascript:$radIE.mouseOver(event);" onmouseout="javascript:$radIE.mouseOut(event);" onblur="javascript:$radIE.blur(event);" onfocus="javascript:$radIE.focus(event);" />
    </div> <img src="icon.png" alt="Small Image Icon"></div>

【问题讨论】：

爱ctl00_ctl00_ContentPlaceHolder1_TextBox1Panel 是一个id。另一方面，你应该可以只用 CSS 来做到这一点。

标签： jquery css jquery-selectors

【解决方案1】：

试试：

#ctl00_ContentPlaceHolder1_Area div[id^="ctl00_ctl00_ContentPlaceHolder1_"] {
    display: inline !important
}

如果可行，看看没有!important 是否可行，这是不好的做法。

演示：http://jsfiddle.net/thirtydot/RGAm8/

【讨论】：

【解决方案2】：

如果你有一个可以使用的选择器（最好是一个类名，或者别的什么），jQuery 会让你做类似的事情

jQuery('.DIV_CLASS').each( function() { jQuery(this).css('display','inline') } )

或者，假设它们都是另一个 div 的一部分，css：

div.container_div div { display: inline; }

【讨论】：

【解决方案3】：

如果容器中没有任何其他 div，则可以使用以下 css：

#ctl00_ContentPlaceHolder1_Area div {
    display: inline;
}

【讨论】：

【解决方案4】：

我会向父 div 添加一个类，然后像这样使用 css

div.parent > div { display:inline; }

这只会设置作为父 div 子级的嵌套 div。换句话说，div 2 将内联显示，但 div 3 不会。

<div class="parent" id="1">
  <div id="2">
    <div id="3"></div>
  </div>
</div>

【讨论】：