2009-06-29 10 views
5

Der Code ist wie folgt:Warum funktioniert der Klassenrand nicht?

<html> 
<head> 
<title>test</title> 
</head> 
<body> 
<div><span>shanghai</span><span class="margin"> </span><span>male</span></div> 
</body> 
</html> 

.margin { 
    width:40px; 
    height:auto; 
} 

Antwort

10

Sie können keine Breite angeben, da es sich um ein Inline-Element handelt.

Diese Eigenschaft gibt den Inhalt Breite der Kästen durch Blockebene erzeugt, und ersetzte Elemente. Diese Eigenschaft gilt nicht für nicht ersetzte Inline-Level-Elemente. - CSS 2.1 Width property

Sie können dieses Problem beheben, indem er einen Block oder Inline-Block-Element zu machen statt:

display:inline-block 

Dies kann jedoch nicht von einigen Browsern unterstützt werden. Sie können jedoch wahrscheinlich das gleiche Ergebnis mit diesem jedoch erreichen:

+0

immer noch das gleiche :( – omg

+0

margin-left hilft! – omg

+0

Inline-Block funktioniert auf Spannen in IE - siehe http://www.quirksmode.org /css/display.html FF2 ist immer noch weniger als zufrieden mit Inline-Block obwohl –

0

Sie sollten zeigen, dass dies eine CSS-Regel lautet: Ways to include CSS in your page.

+0

yup, .margin ist eine CSS-Regel – omg

+1

Ich sehe, aber Sie setzen diese Regel außerhalb des HTML-Dokuments, wie kann der Browser wissen, dass dies ein Stück CSS ist ?! –

0

setzen

<style> 
    .margin {  
    width:40px;  
    height:auto; 
    } 
</style> 
+0

Ist das nicht, was ich getan habe, hm? – omg

+0

Hast du es in eine .html geschrieben und den Effekt gesehen? – omg

+0

Ja und funktioniert sehr gut :) – pedrofernandes

1

CSS in den Kopfbereich gehen sollte und auch in < style> Tags gewickelt werden ...

Wenn Sie diesen Wert aus einem Stylesheet zugreifen. Sie müssten dies im Kopfbereich Ihres Dokuments angeben:

+0

Entschuldigung, habe ich, aber in meinem Beitrag – omg

+0

weggelassen, welchen Browser verwenden Sie? – James

+0

firefox ...... – omg

0

Versuchen Sie Ihren Klassennamen vielleicht ändern?

margin ist ein Attribut. Ich bin mir nicht sicher, ob CSS Schlüsselwörter reserviert hat.

+0

versucht, funktioniert nicht, obwohl – omg

+0

gut zu wissen, dass CSS nicht so verhalten :) ordentlich. –

0

Ich denke, das Problem ist, dass das Tag leer ist. Setzen Sie einfach "& nbsp;" zwischen den beiden Tags.

+0

versuchte, aber nicht helfen – omg

Verwandte Themen