不遵守CSS Width属性 [英] CSS Width property not respected

问题描述

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

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.

我所拥有的是两个内联div周围的div包装器，它们均包含文本.第一个内联div具有给定的宽度，因此当您查看文本时，第二个div文本将彼此对齐，就像在选项卡上一样.在我自己的测试html文件中运行时，此方法效果很好，但是当我在网站上使用它时，width属性不起作用.

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.

使用firefox的检查元素"，您可以看到div继承了一个宽度并且没有被覆盖，但是它仍然显示出该宽度从未出现过！

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!

这是我的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的摘要:

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>

我真的不明白发生了什么.过去，如果我遇到CSS问题，FireFox的检查元素"将表明我的CSS在那儿，但被覆盖了.在这种情况下，它不会显示此信息，但是我猜想该站点的某些设置仍会破坏我的自定义CSS

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.

推荐答案

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

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

10.2内容宽度:"width"属性

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属性不适用于不可替换的内联元素.如果要保持div.Property_Name内联，则需要使用inline-block作为display属性的值.

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屋！