Question

我有一些文本在同一行上左右对齐，问题是有时文本不能适合在一行上，所以必须换行到2行。这很好，但它的包装方式并不理想。如果它不适合单行，我希望左文本换行，右文本保持不变。

以下是一些HTML示例：

<p class="statute_name">Alkali etc Works Regulation Act 1906 <span class="float_right">4.22</span></p>

<p class="statute_name">Ancient Monuments and Archaeological Areas Act 1979 <span class="float_right">2.33, 5.78, 12.86</span></p>

<p class="statute_name">Historic Environment (Amendment) (Scotland) Act 2011 <span class="float_right">12.6, 12.35, 12.86 </span></p>

和CSS：

.statute_name {
    margin-left: 2em;
    text-indent: -2em;
    clear: both;
    text-align: left;
}

.float_right {
    float: right;
    text-align: right;
}

还有一个jsfiddle：http://jsfiddle.net/Z35au/

如果你调整结果窗口的宽度，你可以看到两边重叠，然后右边会移动到左边，最后左边必须包裹，这就是我喜欢它的方式看，但跳过之前发生的行为（重叠和右侧移动到下面）。

我经历了一些不同的左右对齐技术，例如将双方作为不同的p元素并以任意方式浮动它们，将width应用于右侧部分希望它会在它击中时迫使左侧包裹，但它不能按照我想要的方式工作。

Answer 1

嗨，我刚刚搞砸了代码，我发现这样做的最好方法是将css包装在div中，然后给它一个最小宽度为500px。这样可以在两段文本之间保持宽大的间隙，并且可以防止文本重叠。

HTML

<div class="text">
    <p class="statute_name">Alkali etc Works Regulation Act 1906 <span class="float_right">4.22</span></p>

    <p class="statute_name">Ancient Monuments and Archaeological Areas Act 1979 <span class="float_right">2.33, 5.78, 12.86</span></p>

    <p class="statute_name">Historic Environment (Amendment) (Scotland) Act 2011 <span class="float_right">12.6, 12.35, 12.86 </span></p>
</div>

CSS

.statute_name {
    margin-left: 2em;
    text-indent: -2em;
    clear: both;
    text-align: left;
}

.float_right {
    float: right;
    text-align: right;
}

.text{
    min-width:500px;
}

使用左右对齐文本换行

1 个答案: