CSS Text wrap应将浮动元素视为一列

时间:2012-05-24 14:50:15

标签: css css3 css-float

以下是生成的布局,文字正在“Dates”标签下包装。 The problem

以下是理想的结果: The desired result

这是html布局:

<div class="alternate">
    <span class="label">Dates:</span>
    <span id="lblDates">
        Created: <u>May 31, 2011</u>, Quote: <u>Sep 1, 2011</u>, Completed: <u>May 23, 2012</u>, Invoice: <u>May 1, 2011</u>, Finalized: <u>May 31, 2011</u>
    </span>
    <br style="clear:both;">
</div>

相关的CSS:

    fieldset .label {
        text-align: right;
        float: left;
        width: 150px;
        clear: left;
        margin-right: 15px;
        color: black;
        font-weight: bold;
}

如果我为标签添加了预定义的高度,那么它可以工作,但我不希望标签上有预定义的高度,因为有时我只有一行内容,我该如何实现呢?

谢谢!

2 个答案:

答案 0 :(得分:4)

这应该有帮助

#lblDates {
    padding-left: 165px;
    display: block;
}

以下是working example

答案 1 :(得分:0)

margin-left: 165px(165px = 150px + 15px,您在标签上设置的宽度+余量)和display:block上的#lblDates