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

У меня возникла проблема, когда мне нужно иметь возможность изменить серию div для использования "display: inline" в зависимости от того, вложены ли они в определенный div, однако я не могу определить, как выбрать все sub-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.

<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>
Источник

4 ответа

Решение

Пытаться:

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

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

Демо: http://jsfiddle.net/thirtydot/RGAm8/

Источник

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

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

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

div.container_div div { display: inline; }
Источник

Я хотел бы добавить класс в родительский 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 внутри контейнера, вы можете использовать следующий css:

#ctl00_ContentPlaceHolder1_Area div {
    display: inline;
}
Источник
Другие вопросы по тегам