如何使用CSS或jQuery選擇器更改命名div中的嵌套div以顯示為display：inline？

Question

我遇到一個問題，我需要根據其是否嵌套在特定的div中來更改一系列div以使用“ display：inline”，但是我無法確定如何選擇所有子div。 也許有一種簡單的CSS方式可以完成此任務，但是我將更詳細地描述問題。

我有一個使用控件套件的Web應用程序，但是我沒有編程訪問權限來更改控件使用的類/結構，但是最后它們輸出HTML，JavaScript等，並進入DOM。 該套件將控件包裝在一個div中，該div被解釋為一個塊div（因為未指定display：value），這導致在控件旁邊顯示圖像或圖標（例如幫助圖標）的情況下出現問題，因為div是默認情況下呈現為塊而不是嵌入式。 該網站的其余部分仍需要將div視為塊。

有沒有辦法讓添加的div添加style =“ display：inline;” 它試圖通過jQuery或CSS包裝的所有項目？

在下面的示例中，通常需要更改ctl00_ContentPlaceHolder1_Area內/下的所有div才能顯示：內聯，但是更具體地說，以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>

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>