关于一列三排显示的有关问题-HTML教程-爱易网页

关于一列三排显示的有关问题

日期：2014-05-17　浏览次数：20770 次

关于一列三排显示的问题
最近在修改一个wordpress的主题，想增加一个一列三排显示的效果
由于文章标题是直接用了函数调取了，因此只能考虑用CSS ul li通过定义 ul宽度大小，利用 li 的float:left来实现横排排列，超过部分换行。来实现一列三排的效果，如下

我的 ul 和li 的属性定义如下

CSS code

.widget-repeat ul {
    width:285px;
    }   
.widget-repeat li {
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    float:left;
    width:93px;
    text-align:center;
    line-height:33px;
    }

整个调用显示的代码如下,中间省略了一些php的函数：

PHP code

<div  class=widget-repeat>
<div style="clear: both; margin: 0px 0px 15px 0px;"></div>    
<ul>
<li style="list-style-type:none>
<a href="<?php the_permalink(); ?>"><img src="<?php $values = get_post_custom_values("thumbnail_url"); echo $values[0]; ?>"  class="img-bigthumb-list" title="Play <?php the_title_attribute(); ?>" alt="" height="90" width="90" /></a><br/>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php short_title('', '', true, '10'); ?></a>
</li>
</div>

现在上面两个代码就可以实现图上一列三排的效果。
但是却存在着三个问题
1、php代码中对li的加注 <li style="list-style-type:none> 只能这样，如果用<li style="list-style-type:none;"> 或是 <li style=list-style-type:none> 都不发生作用。该目的是为了去除小圆点，但这句也能去了图片前的小圆点，标题前的仍就有。换用另外两个的话，图片和标题都有小圆点
2、标题前的小圆点怎么也去不掉，…… 不知道该怎么去弄
3、UL包含的内容中，不继承<div class=widget-repeat> 的属性。找不到原因

望各位帮忙解决下
（没几分了，分少了点）

------解决方案--------------------
你可以直接让a float:left，不需要用li来的。另外，li的宽度94px,ul的是285px.
你算一下：285/94 = 3.03 这样，一条只能排2个了

直接

HTML code

<div>
<a href="<?php the_permalink(); ?>"><img src="<?php $values = get_post_custom_values("thumbnail_url"); echo $values[0]; ?>"  class="img-bigthumb-list" title="Play <?php the_title_attribute(); ?>" alt="" height="90" width="90" /></a><br/>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php short_title('', '', true, '10'); ?></a>
</div>

------解决方案--------------------
要去圆点
ul,li{list-style-type:none} 就可以了

还要加上这个margin:0;padding:0

综合一起就是
ul,li{list-style-type:none;margin:0;padding:0}

------解决方案--------------------
楼主那个图片里的圆点貌似不是list-style-type产生的
给标题的a里加个style="background:none;"先确实是否是背景图片

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

关于一列三排显示的有关问题

相关资料更多>

推荐阅读更多>