Question

我使用PHP循环遍历数组并返回结果，每个结果都与一些html代码一起显示。现在，为了实现缩进，我使用DIV标签并设置边距如下：

输出1：

<div style='height: 20px;margin-left: 60px;'>

输出2：

<div style='height: 20px;margin-left: 110px;'>

enter image description here

这种为每个输出设置边距的方法的问题在于它依赖于始终匹配的标准，但有时标准不匹配并且缩进被破坏。

所以基本上是否有另一种方法使用CSS或其他方式来增加每个输出的缩进而不必指定一个固定的缩进？

道歉，如果我不够清楚，但希望你能理解我的要求，否则请告诉我，我会尝试澄清一些。

以下是示例代码：

foreach ($data[0] as $data) {
    if ($data == a) {
        echo "<div style='margin-left: 0px; '><img src='img/server_s.png' style='float: left;'></div>";
    } elseif ($data == b) {
        echo "<div style='margin-left: 60px;'><img src='img/link.png' style='clear: left;'></div>";
    } elseif ($data == c) {
        echo "<div style='margin-left: 110px;'><img src='img/link.png' style='clear: left;'></div>";
    }
}

Answer 1

您可以通过HTML的简单列表标记来实现它。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul li {
   list-style: none;
   margin: 15px 0px;
}
span {
   border: 1px solid #000;
   padding: 5px;
}
</style>
</head>
<body>

<h2>A Nested List</h2>

<ul>
  <li><span>Milk</span>
    <ul>
    <li><span>Tea</span></li>
        <ul>
            <li><span>Black Tea</span></li>
        </ul>
    </ul>
  </li>
</ul>

</body>
</html>

示例的参考网址：http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_lists_nested 谢谢＆amp;的问候，

<强>的Vivek

Answer 2

希望这对你有用

$a=0;    
foreach ($data[0] as $data) {

          if ($data == a) {
    echo "<div style='margin-left: ".$a."px; '><img src='img/server_s.png' style='float: left;'></div>";
} elseif ($data == b) {
    echo "<div style='margin-left: ".$a."px;'><img src='img/link.png' style='clear: left;'></div>";
} elseif ($data == c) {
    echo "<div style='margin-left: ".$a."px;'><img src='img/link.png' style='clear: left;'></div>";
}


$a=$a+60;    
}

如何使用CSS缩进html输出

2 个答案: