不同的字體大小跨越標籤內部的p

我在創建不同的字體大小到p中的span元素時遇到了麻煩。 p應該是一個更大的標題文本，跨度緊隨其後，沒有額外的間距，跨度文本會更小，顏色更淺。不同的字體大小跨越標籤內部的p

我無法讓span文本變小。它只是保持與p文本相同的大小。他們之間也有太多的空間，我也喜歡這些文字線條彼此非常接近。

HTML：

<p class="this-p">Hello<br><span class="this-span">Some text here</span></p>

LESS：

.this-p { 
    font-size:1.6em; 
    font-weight: bold; 
    .this-span { 
     font-weight: lighter; 
     font-size:0.9em !important; 
     color: @gray; 
    } 
}

來源

2014-04-28 user3496563

你似乎錯過了關閉p標籤。當找到新的標籤時，它假設段落結束。（_我不確定，但我相信這一點）。 –

更正了代碼。 – user3496563

我只是試圖使字體大小更小（使用我的原始代碼），並意識到它正在工作！其他地方相同的字體大小使文本更小，所以我沒有意識到它正在工作。但是這些太多的文本之間仍然有相當大的空間。 – user3496563

改變你的CSS這樣

.this-p 
{ 
    font-size:1.6em; 
    font-weight: bold; 
} 
.this-span 
{ 
     font-weight: lighter; 
     font-size:0.9em !important; 
     color: gray; 
}

DEMO

來源

2014-04-28 10:30:53

試了一次又一次。不起作用。 – user3496563

@ user3496563查看演示。 –

@ user3496563替換你所提到的css部分，並用上面給出的那個替換它。 –

剛取出支跨度從P擋裏面......

.this-p { 
    font-size:1.6em; 
    font-weight: bold; 
} 
.this-span { 
    font-weight: lighter; 
    font-size:0.9em !important; 
    color: @gray; 
}

我可能是錯的，但沒有在CSS，因爲這等分支......總是有單獨風格的元素.. 。除了SASS，當然...

來源

2014-04-28 10:32:01 Nihilanth

除非你使用SASS模型，否則你不能嵌套這些css。

分開保存它們會有所幫助。

.this-p { 
    font-size:1.6em; 
    font-weight: bold; 
} 

.this-span { 
    font-weight: lighter; 
    font-size:0.9em !important; 
    color: @gray; 
}

來源

2014-04-28 10:33:26 Janak

你在css中做錯了。讓它如下，也請務必關閉<p>標籤

.this-p { 
    font-size:1.6em; 
    font-weight: bold; 
} 
    .this-span { 
     font-weight: lighter; 
     font-size:0.9em !important; 
     color: @gray; 
    }

看看FIDDLE

來源

2014-04-28 10:33:42 Richa

你LESS按預期工作，在這裏看到：http://jsbin.com/mohur/1

但有在這些太多的文本之間仍然有相當大的空間。

這是由於缺少line-height。它要麼繼承body，要麼繼承瀏覽器的默認值。要解決此問題：http://jsbin.com/mohur/2

.this-p { 
    font-size:1.6em; 
    line-height: .75em; 
    font-weight: bold; 
    .this-span { 
     font-weight: lighter; 
     font-size: 0.9em; 
     color: gray; 
    } 
}

小心ems他們可能會非常棘手，處理嵌套的大小。

請注意line-height。如果文本分爲兩行，可能會遇到問題。

我可以想象這樣做將是一個更好的辦法：http://jsbin.com/mohur/3

這種方式，你有兩個元素，並從其他沒有繼承的完全控制。

來源

2014-04-28 12:19:54 mikedidthis

不同的字體大小跨越標籤內部的p

回答

相關問題