当前位置: 代码迷 >> HTML/CSS >> 元素float:right后换行右对齐了,而不是在同一水平位置右齐,真郁闷啊该怎么解决
  详细解决方案

元素float:right后换行右对齐了,而不是在同一水平位置右齐,真郁闷啊该怎么解决

热度:228   发布时间:2012-02-25 10:01:49.0
元素float:right后换行右对齐了,而不是在同一水平位置右齐,真郁闷啊
<!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 ">
span{
float:   right;
}
</style>
</head>

<body>
<div>
<ul>
<li>   <a   href= 'ShowArticle.asp?ArticleID=1429 '   title= 'asdfsdf '   target= '_blank '> asdfsdf </a>   (2006-12-18   12:55:00) <span> test </span> </li>
</ul>
</div>
上面的test怎么到下面一行了啊?我是要它右对齐但不要换行的
</body>
</html>


------解决方案--------------------
位置的问题,float:right的span要放在 <a> 前面

<!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> float:right </title>
<style type= "text/css ">
span{
float: right;
}
</style>
</head>

<body>
<div>
<ul>
<li> <span> test </span> <a href= 'ShowArticle.asp?ArticleID=1429 ' title= 'asdfsdf ' target= '_blank '> asdfsdf </a> (2006-12-18 12:55:00) </li> </ul>
</div>
</body>
</html>
------解决方案--------------------
在CSS里,布局的时候,要从右往左布局的,
------解决方案--------------------
ice的话会误导人的

正确答案(应该正确的:P)是:
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥

也就是说,你的span是float:right,但是你的a还是float:none
如果要让两者占据同一行,要么你把span先于a显示,要么把a也设成float(float:left)

------解决方案--------------------
CSS 2.0手册,网上搜。
  相关解决方案