Свойство CSS Width не соблюдается

Я добавляю некоторые форматированные теги div на сайт с virtuemart в Joomla. До сих пор я добился успеха. Я изменил шаблон, который мы используем, чтобы включить css файл "article.css", который содержит мой пользовательский контент.

У меня есть обертка div вокруг двух встроенных divs, содержащих текст. Первый встроенный div имеет заданную ширину, так что, когда вы смотрите на текст, второй текст div будет выстраиваться в линию друг с другом, как если бы он был с вкладкой. Это отлично работает при запуске в моем собственном тестовом html файле, но когда я использую это на сайте, свойство width не работает.

Используя firefox "Inspect Element", можно видеть, что div наследует ширину и не переопределяется, но он все еще отображается так, как будто ширина никогда не была там!

Это мой CSS:

div.Item_Property
{
 border: 2px solid black;
 padding-left: 5px;
 margin: 2px;
 font-size: 16px;
 width: 320px;
}

div.Property_Name
{
 display: inline;
 margin-right: 10px;
 color: #C41163;
 width: 240px;
}

div.Property_Value
{
 display: inline;
}

Это фрагмент моего HTML:

<div>
 <div>SKU:</div>
 <div>TL-5902/S</div>
</div>
<div>
 <div>Catalog #:</div>
 <div>15-5902-21530</div>
</div>
<div>
 <div>Tadiran Series:</div>
 <div>iXtra</div>
</div>

Я действительно не понимаю, что происходит. Раньше, если бы у меня была проблема с CSS, FireFox "Inspect Element" указывал бы мой CSS как есть, но был бы переписан. Он не показывает это в этом случае, но я предполагаю, что некоторые настройки с сайта IS по-прежнему обрабатывают мой собственный CSS

Кто-нибудь видит, что вызывает это? Спасибо.

2 ответа

Что я вижу из вашего опубликованного кода, так это то, что вы используете свойство width для встроенного элемента.

<span> <a href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property%23the-width-property" rel="nofollow noreferrer" target="_blank">10.2 Ширина содержимого: свойство 'width'</a></span>

Это свойство не применяется к незанятым встроенным элементам. Ширина содержимого незаменимых ячеек встроенного элемента - это размер отображаемого содержимого внутри них (до любого относительного смещения дочерних элементов).

Свойства width/height не применимы к незанятым встроенным элементам. Если вы хотите сохранить div.Property_Name, вам нужно использовать inline-block как значение свойства display.

div.Property_Name {
 display: inline-block; /* <-- Change the display type */
 margin-right: 10px;
 color: #C41163;
 width: 240px;
}


Встроенные элементы не уважают объявление ширины по своей природе. Попробуйте использовать inline-block

licensed under cc by-sa 3.0 with attribution.