不尊重 CSS Width 属性 [英] CSS Width property not respected

问题描述

我正在将一些格式化的 div 标签添加到 Joomla 中具有美德市场的站点.到目前为止，我在这方面取得了成功.我修改了我们使用的模板以包含一个 css 文件article.css"，其中包含我的自定义内容.

我拥有的是围绕两个内联 div 的 div 包装器，它们都包含文本.第一个内联 div 具有给定的宽度，因此当您查看文本时，第二个 div 文本将彼此对齐，就像标签一样.这在我自己的测试 html 文件中运行时非常有效，但是当我在网站上使用它时，width 属性不起作用.

使用 firefox 的Inspect Element"，可以看到 div 继承了一个宽度并且没有被覆盖，但它仍然显示为好像宽度从未存在过一样！

这是我的 CSS:

div.Item_Property{边框:2px纯黑色；左边距:5px；边距:2px；字体大小:16px；宽度:320px；}div.Property_Name{显示:内联；右边距:10px；颜色:#C41163；宽度:240px；}div.Property_Value{显示:内联；}

这是我的 HTML 片段:

<div class="Property_Name">SKU:</div><div class="Property_Value">TL-5902/S</div>
<div class="Item_Property"><div class="Property_Name">目录号:</div><div class="Property_Value">15-5902-21530</div>

<div class="Item_Property"><div class="Property_Name">Tadiran 系列:</div><div class="Property_Value">iXtra</div>

我真的不明白这是怎么回事.过去，如果我遇到 CSS 问题，FireFox 的检查元素"会指示我的 CSS 存在，但被覆盖.在这种情况下它没有显示这一点，但我猜测该站点的某些设置仍然在弄乱我的自定义 CSS

有没有人看到是什么导致了这种情况?谢谢.

解决方案

我从您发布的代码中看到的是，您在内联元素上使用了 width 属性.

<块引用>

10.2 内容宽度:'width' 属性

此属性不适用于不可替换的内联元素.这未替换的内联元素的框的内容宽度是在其中渲染的内容(在任何子项的相对偏移之前).

width/height 属性不适用于不可替换的内联元素.如果要保持 div.Property_Name 内联，则需要使用 inline-block 作为 display 属性的值.

div.Property_Name {显示:内联块；/* <-- 改变显示类型 */右边距:10px；颜色:#C41163；宽度:240px；}

I am adding some formatted div tags to a site with virtuemart in Joomla. I have had success so far in this. I modified the template we are using to include a css file "article.css" which contains my custom content.

What i have is a div wrapper around two inline divs, both containing text. The first inline div has a given width, so that when you look at the text, the second div text will line up with eachother, as if tabbed. This works perfectly when run in my own test html file, but when i use this on the site, the width property is not working.

Using firefox's "Inspect Element", one can see that the div inherits a width and is not overridden, but it still shows up as if the width were never there!

This is my 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;
}

This is a snippet of my HTML:

<div class="Item_Property">
    <div class="Property_Name">SKU:</div>
    <div class="Property_Value">TL-5902/S</div>
</div>
<div class="Item_Property">
    <div class="Property_Name">Catalog #:</div>
    <div class="Property_Value">15-5902-21530</div>
</div>
<div class="Item_Property">
    <div class="Property_Name">Tadiran Series:</div>
    <div class="Property_Value">iXtra</div>
</div>

I really don't understand what is going on. In the past, if i had a CSS problem, FireFox's "Inspect Element" would indicate my CSS as being there, but being over-written. It does not show this in this case, but im guessing some setting from the site IS still goofing up my custom CSS

Does anyone see what is causing this? Thank you.

解决方案

What I see from your posted code is that you are using width property on an inline element.

10.2 Content width: the 'width' property

This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children).

width/height properties are not applicable to non-replaced inline elements. If you want to keep div.Property_Name inline, you need to use inline-block as the value of display property.

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

这篇关于不尊重 CSS Width 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！