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

Question

I'm having an issue where I need to be able to change a series of divs to use “display: inline” based on if they are nested within a particular div, however I cannot determine how to select all the sub-divs. Maybe there is a simple CSS way to accomplish this, but I will describe the problem in more detail.

I have a web app that used a control suite and I do not have programmatic access to change the classes/structure that the controls use, however in the end they output HTML, JavaScript, etc. and make their way onto the DOM. The suite wraps the control in a div that is interpreted as a block div (since no display:value is specified) which causes an issue in situations where an image or icon was displayed next to the control , eg a help icon, since divs are rendered by default as block instead of in-line. The rest of the site needs to still treat the divs as block.

Is there any way to get the added divs to add style="display: inline;" to all the items it tries to wrap either through jQuery or CSS?

In the example below, all the divs within/beneath ctl00_ContentPlaceHolder1_Area generally need to be changed to have display: inline, however more specifically divs that start with ctl00_ctl00_ContentPlaceHolder1_* and are within the div named ctl00_ContentPlaceHolder1_Area.

<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

If you have a selector you can use (ideally a class name, or something else), jQuery will let you do something like

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

Or, assuming they are all part of another div, css:

div.container_div div { display: inline; }

Answer 2

Try:

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

If that works, see if it works without !important , which is bad practise.

Demo: http://jsfiddle.net/thirtydot/RGAm8/

Answer 3

If you don't have any other divs within the container, you could use the following css:

#ctl00_ContentPlaceHolder1_Area div {
    display: inline;
}

Answer 4

I would add a class to the parent div and then use css like this

div.parent > div { display:inline; }

This styles only the nested divs that are children of the parent div. In other words div 2 will be displayed inline, but div 3 will not.

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