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