Question

我想从右到左排列显示的列表元素，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
 
</head>
<body>
<div class="row">
    <div class="col-sm-6">
        <ul>
            <li>Javasript
                <ul>
                    <li>DOM</li>
                    <li>BOM</li>
                    <li>Global Objects</li>
                </ul>
            </li>
            <li>jQuery</li>
            <li>CSS</li>
            <li>HTML</li>
        </ul>
    </div>
</div>
<script>
</script>
</body>
</html>

我试图将class="pull-right"添加到ul元素中，但是发现它们都是右对齐而不格式化的。

我应该一一调整li的填充吗？

我希望它显示为

                               - Javascript
                             - DOM
                             - BOM
                                 - jQuery

Answer 1

尝试以下CSS代码：

ul{
    direction: rtl;
}

Answer 2

您忘记在文件中添加bootstrap css cdn。您可以从here获取引导CSS。

然后可以使用引导网格。引导程序中有行类。它有12列。点击here了解网格概念。

pull-right替换为float-right。同样，pull-left被float-left取代。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
   <div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4">
        <ul>
            <li>Javasript
                <ul>
                    <li>DOM</li>
                    <li>BOM</li>
                    <li>Global Objects</li>
                </ul>
            </li>
            <li>jQuery</li>
            <li>CSS</li>
            <li>HTML</li>
        </ul>
    </div>
    <div class="col-sm-4"></div>
</div>

<script>
</script>
</body>
</html>

更新：-根据您的问题输出已更新。这样，可能会遇到多种解决方案。解决方案之一是可以使用我上面提到的网格概念。确定我在代码中更新时要在其中显示内容的列。除此之外，您还可以使用align-item和引导程序。除此之外，您还可以使用justify-content-center link。

从右到左显示列表元素

2 个答案: