Как изменить вложенные div внутри именованного div для отображения в виде display: inline с использованием селекторов CSS или jQuery?

Question

У меня проблема с тем, что мне нужно иметь возможность изменить серию div для использования «display: inline», основываясь на том, вложены ли они в определенный div, однако я не могу определить, как выбрать все вложенные элементы. дивы. Возможно, есть простой способ сделать это с помощью CSS, но я опишу проблему более подробно.

У меня есть веб-приложение, в котором используется набор элементов управления, и у меня нет программного доступа для изменения классов / структуры, используемых элементами управления, однако в конце они выводят HTML, JavaScript и т. Д. И попадают в DOM. , Пакет оборачивает элемент управления в элемент div, который интерпретируется как блок div (поскольку не отображается display: значение), что вызывает проблему в ситуациях, когда рядом с элементом управления отображается изображение или значок, например, значок справки, так как div отображаются по умолчанию как блок, а не как in-line. Остальная часть сайта должна по-прежнему рассматривать div как блок.

Есть ли способ получить добавленные div для добавления style = "display: inline;" ко всем элементам, которые он пытается обернуть через jQuery или CSS?

В приведенном ниже примере все элементы div внутри / под ctl00_ContentPlaceHolder1_Area, как правило, должны быть изменены, чтобы иметь display: inline, однако, более конкретно, элементы div, начинающиеся с ctl00_ctl00_ContentPlaceHolder1_ * и находящиеся внутри элемента div с именем ctl00_ContentPlaceHolder1_Area * 100.

<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

Я бы добавил класс к родительскому 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>

Answer 2

Попробуйте:

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

Если это работает, посмотрите, работает ли оно без !important, что является плохой практикой.

Демонстрация: http://jsfiddle.net/thirtydot/RGAm8/

Answer 3

Если у вас нет других элементов div внутри контейнера, вы можете использовать следующую команду:

#ctl00_ContentPlaceHolder1_Area div {
    display: inline;
}

Answer 4

Если у вас есть селектор, который вы можете использовать (в идеале, имя класса или что-то еще), jQuery позволит вам сделать что-то вроде

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

Или, если они все являются частью другого div, css:

div.container_div div { display: inline; }