logo标签列表

如何使用CSS缩进HTML输出

htmlcss
3
我正在使用PHP循环遍历数组并返回结果，每个结果都与一些HTML代码一起显示。现在，为了实现缩进，我正在使用DIV标签并设置边距，如下所示：
对于输出1：
对于输出2：
这种针对每个输出设置边距的方法存在问题，它依赖于标准始终匹配，但有时标准不匹配，缩进会被破坏。
因此，是否有另一种使用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>";
    }
}
同时提供您迄今为止尝试过的代码示例。 - Qaisar Satti
完成。刷新我的帖子。 - user3436467
2个回答
2
您可以通过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 谢谢 & 祝好

Vivek

1
希望这对你有用。
$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;    
}
感谢提供示例代码。我应该指出，对于每个条件，可能有匹配项，也可能没有，但我希望保持有序的缩进。你的代码看起来很有趣，所以我会尝试一下并回报结果。 - user3436467
Qaisar，这确实可以正常工作并完全满足需求。非常感谢！ - user3436467
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接