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

关于一列三排显示的问题
最近在修改一个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;"先确实是否是背景图片 

 

查看更多 下一篇