Question

我遇到了一个问题，我需要能够更改一系列div以使用“display：inline”基于它们是否嵌套在特定div中，但是我无法确定如何选择所有子div的。也许有一种简单的CSS方法可以实现这一点，但我会更详细地描述这个问题。

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

有没有办法让添加的div添加style =“display：inline;”它尝试通过jQuery或CSS包装的所有项目？

在下面的示例中，ctl00_ContentPlaceHolder1_Area内/下的所有div通常需要更改为显示：inline，但更具体地说，以ctl00_ctl00_ContentPlaceHolder1_ *开头的div并且位于名为ctl00_ContentPlaceHolder1_Area的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>

Answer 1

如果你有一个你可以使用的选择器（理想情况下是一个类名，或其他东西），jQuery会让你做类似的事情

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

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

div.container_div div { display: inline; }

Answer 2

尝试：

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

如果有效，请查看它是否有效!important，这是不好的做法。

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

Answer 3

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

#ctl00_ContentPlaceHolder1_Area div {
    display: inline;
}

Answer 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>

如何更改命名div中的嵌套div以显示为display：使用CSS或jQuery选择器内联？

4 个答案: