在CSS中使用不同樣式的文本具有相同的寬度

Question

我想知道是否有一種方法可以製作具有相同文本的html元素，但是以不同的樣式佔用相同的空間量而不會給出固定的寬度。

Here's jsfiddle我在說什麼。

儘管樣式略有不同，但我希望兩個div都具有相同的寬度。文本可以改變，所以我不能給div一個固定的寬度，或者使用固定的填充或邊距來實現這一點。有任何想法嗎？

HTML：

<div class="normal">Lorem ipsum dolor sit amet.</div><br /> 
<div class="disabled">Lorem ipsum dolor sit amet.</div> 

CSS：

div { 
    padding:5px; 
    display:inline-block; 
    border:1px solid black; 
    background-color:lightgray; 
} 

.normal { 
    font-weight:bolder; 
} 

.disabled { 
    font-weight:lighter; 
    font-style:italic; 
    color:#666666; 
} 

編輯： 兩種不同風格的div不會在其應用彼此相鄰。他們是同一個div，我只是希望在應用不同風格時div的大小不會改變。這裏有一個更好的例子：http://jsfiddle.net/cbargren/4b8KQ/3/

Answer 1

總結他們在display: inline-block一個div，並且從孩子div動手清除display: inline-block。

http://jsfiddle.net/thirtydot/4b8KQ/1/

HTML：

<div class="foo"> 
    <div class="normal">Lorem ipsum dolor sit amet.</div> 
    <div class="disabled">Lorem ipsum dolor sit amet.</div> 
</div> 

CSS：

.foo { 
    display: inline-block; 
} 
.foo div { 
    padding:5px; 
    border:1px solid black; 
    background-color:lightgray; 
} 

.normal { 
    font-weight:bolder; 
} 

.disabled { 
    font-weight:lighter; 
    font-style:italic; 
    color:#666666; 
}