Question

我正在尝试创建由xml文档的ajax调用填充的ul的水平滚动。按照构成，内容将滚动，但列表项将堆叠而不是并排放置。研究表明，我可以通过一些简单的CSS来达到预期的效果。但是，我一直无法成功实现这一目标...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="text/css">
    <link href="css/wneRSS.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>

</head>
<body>

<div id="rss">
    <div class="list"><ul class="feeder"></ul></div>
</div>

</body>



<script>
$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "XMLSource",
    dataType: "xml",
    success: function(xml){
    $(xml).find('row').each(function(){
      var sfirst = $(this).find('First').text();
      var slast = $(this).find('Last').text();
      var scity = $(this).find('PermanentCity').text();
      var sstate = $(this).find('PermanentRegion').text();
      $("<li></li>").html(sfirst + " " + slast + " - " + scity + ", " + sstate).appendTo("#rss ul");
    });
  },
  error: function() {
    alert("An error occurred while processing XML file.");
  }
  });
});
</script>

</html>

CSS：

body {
    margin: 0;
    padding: 0;
    background-color: #373737;
    color: white;
    font-family: sans-serif;
    overflow: hidden;
}
#rss {
    width: 1920px;
    height: 82px;
    margin:0px;
}

.list ul {
    padding: 0;
    margin: 0;
    border: 0;
    float: left;
    display: inline;
    width: auto;
}

.list ul li {
    float: left;
    margin: 0;
    padding: 0;
    border: 0;
    display: inline;
}





.feeder {
 font-size: 40px;
 line-height: 82px;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 animation: scroller 60s linear infinite;
}


@keyframes scroller {
 0%   { 
  transform: translateX(100%);      
 }
 100% { 
 transform: translateX(-100%); 
 }
}

Answer 1

在容器中添加width = auto可以解决问题。

Answer 2

您的容器可能不够宽，无法容纳列表项。您需要将无序列表元素嵌套在一个足够宽的容器中，以免它们破裂。

动态UL项目未同时显示

2 个答案: