Question

我有这个代码：

 <ol>
    <?php foreach ($articles as $article) { ?>
    <li>
        <img src="public_html/images/example.jpg" height="250" width="250">
        <br />
        <a href="public_html/article.php?id=<?php echo 
$article['article_id'];?>">
            <?php echo $article['article_title'];?>
        </a>
        - <small>
            posted <?php echo date('l jS', $article['article_timestamp'])?>
        </small>
    </li>
    <?php } ?>
</ol>

现在它以这种方式打印我：

img
title 
img
title
...

我想要这样打印我的内容：

img      img     img     ...
title    title   title

我尝试换行或在div标签中使用，但这不起作用。我该怎么办？

谢谢

Answer 1

一种方法是使用bootstrap，然后您的代码将如下所示：

<div class="container">
  <ol class="row">
    <?php foreach ($articles as $article) { ?>
     <li class="col-sm">
        <img src="public_html/images/example.jpg" height="250" width="250">
        <br />
        <a href="public_html/article.php?id=<?php echo $article['article_id'];?>">
           <?php echo $article['article_title'];?>
        </a>
      - <small>
           posted <?php echo date('l jS', $article['article_timestamp'])?>
        </small>
      </li>
    <?php } ?>
  </ol>
</div>

不要忘记将引导CSS文件安装到您的代码Quickstart to bootstrap

中

Answer 2

我建议您研究一下CSS Grid之类的东西以获得所需的布局。但是解决此问题的一种简单方法是将列表项浮动到左侧。在代码之前包含以下样式标签：

<style>
ul li { float:left;}
</style>
<ol>
    <?php foreach ($articles as $article) { ?>
    <li>
        <img src="public_html/images/example.jpg" height="250" width="250">
        <br />
        <a href="public_html/article.php?id=<?php echo 
$article['article_id'];?>">
            <?php echo $article['article_title'];?>
        </a>
        - <small>
            posted <?php echo date('l jS', $article['article_timestamp'])?>
        </small>
    </li>
    <?php } ?>
</ol>

Answer 3

您可以只使用简单的CSS：

li {
display: inline-block;
}

PHP和HTML-回声li标签，不带换行符

3 个答案: