当前位置：编程学习 > html/css >>

css的文章列表遇到的问题？

下面这个代码遇到的问题是：最右边的数字不在文章列表的最右边，脱离了文章列表了，怎么设置能让这些数字在文章列表的右边。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>豆瓣</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
	font-size:12px;
	list-style-type:none;
	text-decoration:none;
}
body {
	background:#fff; margin:0px auto;
}
#wrapper{
	width:950px;
	margin:10px auto;
	}
ul#show_list(
	width:320px;
	display:inline;
	overflow:hidden;
	
	
)	
ul#show_list li{
	float:left;
	margin-bottom: 7px;
    padding: 0 0 7px;
		}
ul#show_list li a{
	display:block;
	width:320px;
	height:29px;
	border-bottom:1px dashed #ddd;
	line-height:29px;
	text-indent:3px;
	color: #336699;
	overflow:hidden; 
		position:relative;
	}	
ul#show_list li div.up, ul#show_list li div.down, ul#show_list li div.stay {
    
    color: #999999;
  	display:block;
   	float:right;
   	display:inline;
   	overflow:hidden;
    font-size: 9px;
    padding-left: 15px;
    width: 20px;
    
}

</style>
 </head>
<body>
	<div id="wrapper">
		<ul id="show_list">
			<li  class="clearfix"><a href="#">1   皮娜</a><div class="up">1</div></li>
			<li><a href="#">2   疯狂愚蠢爱</a><div class="up">9</div></li>
			<li><a href="#">3   阳光姐妹淘</a><div class="down">2</div></li>
			<li><a href="#">4   亡命驾驶</a><div class="up">4</div></li>
			<li><a href="#">5   盲</a><div class="up">6</div></li>
			<li><a href="#">6   高迪战</a><div class="up">5</div></li>
			<li><a href="#">7   深藏不露</a><div class="up">4</div></li>
			<li><a href="#">8   忧郁症</a><div class="down">1</div></li>
			<li><a href="#">9   一夜迷情</a><div class="up">2</div></li>
			<li><a href="#">10  死亡实验</a><div class="up">1</div></li>
		</ul>
	</div>		
</body>
</html>
答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>豆瓣</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
	font-size:12px;
	list-style-type:none;
	text-decoration:none;
}
body {
	background:#fff;
	margin:0px auto;
}
#wrapper {
	width:950px;
	margin:10px auto;
}
ul#show_list {
	width:320px;
	overflow:hidden;
}
ul#show_list li {
	width:300px;
	height:29px;
	line-height:29px;
	border-bottom:1px dashed #ddd;
	overflow:hidden;
}
ul#show_list li a {
	text-indent:3px;
	color: #336699;
	overflow:hidden;
	position:relative;
	float:left;
}
ul#show_list li div.up, ul#show_list li div.down, ul#show_list li div.stay {
	color: #999999;
	display:inline;
	float:right;
	display:inline;
	overflow:hidden;
	font-size: 9px;
}
ul#show_list li div.up{display:inline;text-align:right;float:right;}
</style>
</head>
<body>
<div id="wrapper">
	<ul id="show_list">
		<li class="clearfix"><a href="#">1   皮娜</a><div class="up">1</div></li>
		<li><a href="#">2   疯狂愚蠢爱</a><div class="up">9</div></li>
		<li><a href="#">3   阳光姐妹淘</a><div class="down">2</div></li>
		<li><a href="#">4   亡命驾驶</a><div class="up">432</div></li>
		<li><a href="#">5   盲</a><div class="up">6</div></li>
		<li><a href="#">6   高迪战</a><div class="up">5</div></li>
		<li><a href="#">7   深藏不露</a><div class="up">444</div></li>
		<li><a href="#">8   忧郁症</a><div class="down">1</div></li>
		<li><a href="#">9   一夜迷情</a><div class="up">2</div></li>
		<li><a href="#">10  死亡实验</a><div class="up">1</div></li>
	</ul>
</div>
</body>
</html>


有问题可以随时联系我.我百度HI经常在线...
其他：中间有好几个地方写错了， 特别是 ul#show_list 后面 括号 写成了 ( ) 
下面是 写好的代码 

---------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>豆瓣</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
	font-size:12px;
	list-style-type:none;
	text-decoration:none;
}

body {
	background:#fff; margin:0px auto;
}

#wrapper{
	width:950px;
	margin:10px auto;
}

ul#show_list{
	width:320px;
	overflow:hidden;
}

ul#show_list li{
	height:29px;
	border-bottom:1px dashed #ddd;
	line-height:29px;
	text-indent:3px;
}

ul#show_list li a{
	color: #336699;
}	

ul#show_list li div.up, ul#show_list li div.down, ul#show_list li div.stay {
    color: #999999;
  	display:block;
   	float:right;
   	overflow:hidden;
    font-size: 9px;
    padding-left: 15px;
    width: 20px;
}

</style>
 </head>
<body>
	<div id="wrapper">
		<ul id="show_list">
			<li  class="clearfix"><a href=>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>豆瓣</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
	font-size:12px;
	list-style-type:none;
	text-decoration:none;
}
body {
	background:#fff; margin:0px auto;
}
#wrapper{
	width:950px;
	margin:10px auto;
	}
ul#show_list{
	width:320px;
	display:inline;
	overflow:hidden;
	
	
}
ul#show_list li{
	float:left;
	margin-bottom: 7px;
    padding: 0 0 7px;
	/*border:1px solid red;*/
		}
ul#show_list li a{
	display:block;
	width:320px;
	height:29px;
	border-bottom:1px dashed #ddd;
	line-height:29px;
	text-indent:3px;
	color: #336699;
	overflow:hidden; 
	float:left;
	/*border:1px solid red;*/
	height:28px;
	line-height:28px;
	}	
ul#show_list li div.up, ul#show_list li div.down, ul#show_list li div.stay {
    
    color: #999999;
   	float:right;
   	display:inline;
   	overflow:hidden;
    font-size: 9px;
    padding-left: 15px;
    width: 20px;
  /*  border:1px solid red;*/
	height:28px;
	line-height:28px;
}

</style>
 </head>
<body>
	<div id="wrapper">
		<ul id="show_list">
			<li  class="clearfix"><a href="#">1   皮娜</a><div class="up">1</div></li>
			<li><a href="#">2   疯狂愚蠢爱</a><div class="up">9</div></li>
			<li><a href="#">3   阳光姐妹淘</a><div class="down">2</div></li>
			<li><a href="#">4   亡命驾驶</a><div class="up">4</div></li>
			<li><a href="#">5   盲</a><div class="up">6</div></li>
			<li><a href="#">6   高迪战</a><div class="up">5</div></li>
			<li><a href="#">7   深藏不露</a><div class="up">4</div></li>
			<li><a href="#">8   忧郁症</a><div class="down">1</div></li>
			<li><a href="#">9   一夜迷情</a><div class="up">2</div></li>
			<li><a href="#">10  死亡实验</a><div class="up">1</div></li>
		</ul>
	</div>		
</body>
</html> 
笔者在这里的几个问题可以简单滴说一下偶滴个人意见
1.关键a标签
a默认的为行内标签，即是默认的状态下的下一个节点不会换行，可是当在a的属性中添加了display：block后它有行内标签变成了块标签。这也是为什么其后面的页码跑到了下一行。
当在a中添加float：left，而其后紧跟的兄弟节点添入float：right后，他们就能在一行了。
2，关于a标签中的文字，与div中的文字虽然在一行，但仍没有对应的问题。
在这里将a的高度与div的高度设相同，然后将文字行高与高度相同，他们就能够对齐且上下居中显示了。height:28px;line-height:28px;

上一个：用js调用css隐藏文章,百度能检查到吗?能惩罚吗?
下一个：请问各位大虾，可以用js特效或css的滤镜实现一张图片在网页中镜像显示吗？如果可以，怎样实现呢？

更多图片编程知识:
更多html/css疑问解答：
div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊
css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
css 属性选择器 ie6 不支持吗？
用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：
介绍本学习css的书
wordpress多个CSS样式怎么调用？
这个div 的css是如何编写的
div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？
表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写
CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。
dw中html文档为什么无法链接css文档
设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。
我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？
css问题，跪求大大帮忙
请教网页设计高手，如下图的这种css代码怎么写？
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
微信小程序
thinkphp
如果你遇到编程学习难题：
访问www.zzzyk.com 试试
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，