PHP/MYSQL News Ticker 没有在一行中显示结果

Question

我想为我的网站制作一个新闻自动收报机，用户可以在其中阅读最后 5 条新闻，但是当我输入整个代码时，我得到了 5 个结果，但以不同的方式......所有 5 个结果应该是 1 - 2 - 3 - 4 - 5. 我附上了带有输出截图的 php & css 代码。 这是我的php代码

$sql = "SELECT * FROM sub_news ORDER BY id DESC LIMIT 5 OFFSET 1";  
$resultnews = mysqli_query($con, $sql);  
if(mysqli_num_rows($resultnews) > 0)  
                     {  
                         while($rownews = mysqli_fetch_array($resultnews))  
                          { 
                
 echo "<div class='hwrap'><div class='hmove'>
  <div class='hitem'><div class='breakingnews'>TOP NEWS</div> <a href=postinfo.php? 
id=".$rownews['id'].">".$rownews['title']."</a></div>
</div></div>";


                         }  
                     } 

Here is my CSS

@media only screen and (max-width: 768px) {
  .hmove { animation-duration: 10s; }
}
/* (A) FIXED WRAPPER */
.hwrap {
  white-space: pre; 
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  background: #FFF603;
  font-family: 'Vesper Libre', serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 10px;
}
 
/* (B) MOVING TICKER WRAPPER */
.hmove { display: flex; }

/* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
.hitem {
  flex-shrink: 10;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
.breakingnews {
  background-color: #dd0000; /* Green */
  font-family: 'Poppins', sans-serif;
  color: #FFF;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 3px;
}
/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
  0% { transform: translate3d(100%, 0, 0); }
  100% { transform: translate3d(-250%, 0, 0); }
}
.hmove { animation: tickerh linear 15s infinite; }
.hmove:hover { animation-play-state: paused; }

使用上面的代码，我得到了这个结果 https://i.stack.imgur.com/q7hfU.png

我想在一个滚动条中显示最后 5 条新闻，请帮助我获得结果！谢谢你

Answer 1

您在 while 循环中使用了所有 div。我在 while 循环前后移动了两行。

改变

<div class='breakingnews'>TOP NEWS</div>

到

<span class='breakingnews'>TOP NEWS</span>

$sql        = "SELECT * FROM sub_news ORDER BY id DESC LIMIT 5 OFFSET 1";
$resultnews = mysqli_query($con, $sql);
if (mysqli_num_rows($resultnews) > 0) {
    echo "<div class='hwrap'><div class='hmove'><div class='hitem'>";
    while ($rownews = mysqli_fetch_array($resultnews)) {
        echo "<span class='breakingnews'>TOP NEWS</span>
              <a href=postinfo.php?id=" . $rownews['id'] . ">" . $rownews['title'] . "</a>";
    }
    echo "</div></div></div>";
} 

在css类中删除这一行white-space: pre;

.hwrap {
    white-space: pre; /* <<< */
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    background: #FFF603;
    font-family: 'Vesper Libre', serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 9px;
}

示例视图