dsn46282 2014-05-22 11:42
浏览 74

如何在一行中显示3 <li>

I need to show 3 images in each row in <ul> tag. I have multiple <ul> tags and in each <ul> tag, I am showing 6 images. Now i have to show 3 <li> in first row and next 3 <li> in second row. Then same for next <ul>. I need to break row after 3 <li>. This is my code :

 <div class="sets">

    <?php  foreach ($sets as $set => $items) : ?>
        <ul class="set test-set">

        <?php  $i=0; foreach ($items as $thumb) : ?>

        <?php

            /* Prepare Image */
            $content = '<img src="'.$thumb['cache_url'].'" width="'.$thumb['width'].'" height="'.$thumb['height'].'" alt="'.$thumb['filename'].'" />';

        ?>
        <?php  if($i === 0): 
        echo '<li><div>'; ?>
        <?php endif; ?> 

        <?php echo $content; ?>

        <?php  if($i === 2):  $i = 0; ?>

        <?php else: $i++; endif; ?>
        </div></li>                 
        <?php endforeach; ?> 

    </ul>
    <?php endforeach; ?>

</div>
  • 写回答

1条回答 默认 最新

  • douningle7944 2014-05-22 11:44
    关注

    http://jsfiddle.net/z4Q48/

    li{
      float: left;
    }
    
    li:nth-child(3n+4){
      clear: both;
    }
    

    see http://css-tricks.com/how-nth-child-works/

    评论

报告相同问题?

悬赏问题

  • ¥15 多址通信方式的抗噪声性能和系统容量对比
  • ¥15 winform的chart曲线生成时有凸起
  • ¥15 msix packaging tool打包问题
  • ¥15 finalshell节点的搭建代码和那个端口代码教程
  • ¥15 用hfss做微带贴片阵列天线的时候分析设置有问题
  • ¥15 Centos / PETSc / PETGEM
  • ¥15 centos7.9 IPv6端口telnet和端口监控问题
  • ¥20 完全没有学习过GAN,看了CSDN的一篇文章,里面有代码但是完全不知道如何操作
  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 海浪数据 南海地区海况数据,波浪数据