Jstree

Question

如何让jsTree在模板上正确居中？我试着只使用

，但我得到了这样的东西

如图所示，很难看出哪个节点是 child/parent。我喜欢它在 https://www.jstree.com/（右边的方块）上的制作方式。

模板代码（我觉得不需要）：

<html>

<head>
    <title>XLS</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
</head>

<body onload="PathInit()">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
    <br><br><br><br>
    <center>
        <br><b>Select a directory.<br></b></center><br><br>
    <script>
        function PathInit() {
            $.get("/xls/path/", {
                path: ""
            });
        }

    </script>
    <center>
        <div id="container" name="container">
            //Way to many
            <ul>'s and
                <li>'s
        </div>
        <script>
            function myf(a) {
                return a.instance.get_selected(true)[0].text;
            }
            var tree = $('#container')
                .jstree();
            $('#container')
                .on("changed.jstree", function(e, data) {
                    var elo = window.myf(data);
                    console.log(elo);
                    $.get("/xls/path/", {
                        path: elo
                    });
                });

        </script>


        <center><br>
            <form method="post">

                <br><br><b>Select source language:
                    <br>
                    <select name="source" id="source" option selected>
                        {% for o in data %}
                        <option value="{{o.name}}">{{o.full}}</option>

                        {% endfor %}
                    </select>

                    <br>
                    <br>Select destionation languages:<br></b>
                (hold ctrl to add more items)<br>
                <select multiple name="args[]" id="args" size="10">
                    {% for o in data %}
                    <option value="{{o.name}}">{{o.full}}</option>
                    {% endfor %}
                </select>

                <br><br><br>


                <input type="submit" value="Send"><br><br></form>
            <a href="/index/">Back</a>
        </center>
</body>

</html>

Answer 1

对齐问题是由于 html center 标签不能很好地与 jsTree 的 CSS 样式一起工作。一种方法是从中心标记中删除树 Div 并将其与一些自定义 CSS.

对齐

<div id="container" name="container" style="margin-left: auto; margin-right: auto; display: table">
        //Way to many <ul>'s and <li>'s
</div>

Jstree - 如何正确放置在模板上

Jstree - How to properly place on template

html

placement