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

Question

我想知道是否有一種方法可以使html元素具有相同的文本，但是采用不同的樣式占用相同的空間而又不給其固定的寬度。

這是我在說的東西。

我希望兩個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;
}