在CSS中使用不同样式的文本具有相同的宽度

时间:2011-12-13 23:07:30

标签: html css

我想知道是否有办法制作一个带有相同文字的html元素,但是在不同的样式中占用相同的空间而不给它一个固定的宽度。

Here's我正在谈论的内容。

我希望两个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/

1 个答案:

答案 0 :(得分:3)

使用divdisplay: inline-block包裹起来,并从子display: inline-block中移除div

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;
}