Question

我正在尝试使用带有ajax的jQuery从XML文件中显示一些数据，但是当我在屏幕上显示时，我遇到了一些问题。我已经尝试在Google Chrome和Mozilla Firefox上打开它。

我想看起来像这张图片： what I want

但是当我尝试时，我得到了： what I got

这是我的HTML和JQuery代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP com AJAX</title>
        <link href="_css/style.css" rel="stylesheet">
    </head>

    <body>
        <button id="botao">Carregar</button>
        <div id="listagem"></div>

        <script src="jquery.js"></script>
        <script>

            $('button#botao').click(function(){
                $('div#listagem').css('display', 'block');
                carregarDados();
            })

            function carregarDados(){

            $.ajax({
                url:'_xml/produtos.xml'
            }).then(sucesso, falha);

            function sucesso(arquivo){
               var elemento;
                elemento = "<ul>";
                $(arquivo).find('produto').each(
                function(){
                    var nome = $(this).find('nomeproduto').text();
                    var preco = $(this).find('precounitario').text();
                    elemento += "<li class='nome'>" + nome + "</li>";
                    elemento += "<li class='preco'>" + preco + "</li>";

                });
                elemento += "</ul>";
                $('div#listagem').html(elemento);
            }

            function falha(){

            }
            }

        </script>
    </body>
</html>

这是我的CSS文件：

div#listagem{
width: 300px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
display: none;
margin-top: 20px}

div#listagem ul{
margin: 0;padding: 0;}

div#listagem ul li{
list-style-type: none;
display: inline-block;
font-family: sans-serif;
font-size: 12px;}

div#listagem ul li.nome{
width: 240px;}

div#listagem ul li.preco{
width: 40px;}

此刻我一直在看着我的代码。

Answer 1

将名称和值放在一个li中，在CSS中使用Float属性。确保最后清除浮动。

elemento += "<span class='nome'>" + nome + "</span>";
elemento += "<span class='preco'>" + preco + "</span>";

div#listagem ul li span.nome{
     width: 240px;
     float: left;
}

div#listagem ul li span.preco{
    width: 40px;
    float: right;
}

Answer 2

通过创建表格结构，您将满足您的要求

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP com AJAX</title>
    <link href="_css/style.css" rel="stylesheet">
</head>

<body>
    <button id="botao">Carregar</button>
    <div id="listagem"></div>

    <script src="jquery.js"></script>
    <script>

        $('button#botao').click(function(){
            $('div#listagem').css('display', 'block');
            carregarDados();
        })

        function carregarDados(){

        $.ajax({
            url:'_xml/produtos.xml'
        }).then(sucesso, falha);

        function sucesso(arquivo){
           var elemento;
            elemento = "<table>";

            $(arquivo).find('produto').each(
            function(){
                var nome = $(this).find('nomeproduto').text();
                var preco = $(this).find('precounitario').text();
                elemento += "<tr>";
                elemento += "<td class='nome'>" + nome + "</td>";
                elemento += "<td class='preco'>" + preco + "</td>";
                elemento += "</tr>";
            });
            elemento += "</table>";
            $('div#listagem').html(elemento);
        }

        function falha(){

        }
        }

    </script>
</body>

Answer 3

ul { padding: 10px; margin: 0; width: 250px; border: 1px solid; list-style-type: none; }
li { white-space: nowrap; }
li .nome { text-align: left; width: 60%; display: inline-block; }
li .preco { text-align: right; width: 40%; display: inline-block; }

<ul>
    <li>
        <div class="nome">left</div>
        <div class="preco">right</div>
    </li>
</ul>

使用flexbox CSS ：

ul { padding: 10px; margin: 0; width: 250px; border: 1px solid; list-style-type: none; }
li { display: flex; flex-wrap: nowrap; }
li .nome { align-self: flex-start; width: 60%; }
li .preco { align-self: flex-end; text-align: right; width: 40%; }

https://jsfiddle.net/36jd15h5/

Answer 4

在样式表中添加这个2类：

.nome{
   display:inline-block;
   width:75%;
   vertical-align:top;
}

.preco{
   display:inline-block;
   width:20%;
   vertical-align:top;
}

ul和li的CSS和jQuery问题

4 个答案: