我正在尝试使用 jQuery 和 ajax 显示 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;}
此时此刻我正在查看我的代码。
最佳答案
在样式表中添加这两个类:
.nome{
display:inline-block;
width:75%;
vertical-align:top;
}
.preco{
display:inline-block;
width:20%;
vertical-align:top;
}
关于javascript - CSS 和 jQuery 的 ul 和 li 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48746277/