html - 当内容转到新行时取消右拉

Question

<footer id="footer" class="bg-dark pt10">
    <div class="container">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="row">
                <div class="col-lg-12">
                    <span class="copyright link">Copyright © 2006-2015 Pure International</span>
                    <ul class="list-inline pull-right">
                        <li><a class="link" href="<?= site_url("page/view/privacy"); ?>"><?= lang("privacy"); ?></a></li>|
                        <li><a class="link" href="<?= site_url("page/view/terms"); ?>"><?= lang("t&c"); ?></a></li>|
                        <li><a class="link" href="<?= site_url("page/view/about_us"); ?>"><?= lang("about_us"); ?></a></li>|
                        <li><a class="link" href="<?= site_url("page/view/contact_us"); ?>"><?= lang("contact_us"); ?></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

输出是这样的:

AAAAA          BB|CC|DD|EE

它在大屏幕上工作正常，但是，当屏幕较小时，正确的内容会换行:

AAAAA
              BB|CC|DD|EE

并右对齐。

我怎样才能防止这种情况发生？我想要实现的是:

AAAAA
BB|CC|DD|EE 

当屏幕变小时。感谢您的帮助。

Answer 1

给 pull-left 和 text-align: right;。

片段

.pull-left {float: left; width: 50%;}
.text-right {text-align: right;}
@media screen and (max-width: 300px) {
  .pull-left {float: none;}
  .text-right {text-align: left;}
}

<div class="pull-left">Left</div>
<div class="pull-left text-right">Right</div>