时间戳

首页 > 解决方案 > PHP循环回显CSS类

php - PHP循环回显CSS类

问题描述

CSS

.number{
  float:none;
  background-color:white;
  cursor:ponter;
}
#panel{
  background-color:red;
  height:200px;
  width:100px;
  overflow-y:scroll;
}

我想在面板中列出数字。我试过 HTML

HTML

<div id="panel>
  <span class="number">1</span>
  <span class="number">2</span>
  <span class="number">3</span>
  <span class="number">4</span>
  .....
  <span class="number">50</span>
</div>

单击时<span>，jQuery会出现一些东西，但我对jQuery没有问题。

因为我认为手动循环数字效率不高，所以我尝试使用 PHP。

PHP

<?php
for($number=0;$number<=50;$number++){
  echo "<span class='number'>".$number."</span>";
}
?>

但是 PHP 生成的数字并不像 HTML 那样。

这就是我想要并通过 HTML 完成的。

这就是我想要并通过 HTML 完成的。

这是用 PHP 完成的，数字是水平的，直到 50

这是用 PHP 完成的，数字是水平的，直到 50

标签： phphtmlcss

解决方案

您需要确保在 PHP 中循环时存在相同的空格：

<?php
for($number=0;$number<=50;$number++){
  echo "<span class='number'>".$number."</span>\n";
}
?>

请记住，您的原始代码只是输出一个长字符串：

<span class='number'>1</span><span class='number'>2</span>...

在这种情况下，空格（换行符）很重要，它可能会改变 CSS 的外观。每次<span>通过添加回显 a 时强制换行\n应该可以解决此问题。

推荐阅读