请教CSS达人，怎样在li中设置两个span标记左右浮动？
我想在一个无序列表中显示新闻标题，标题向左浮动，新闻发布日期向右浮动，列表在一个固定宽度的div里，但我设置了两个span的float属性后，样式发生了错乱，请教达人怎样...
我想在一个无序列表中显示新闻标题，标题向左浮动，新闻发布日期向右浮动，列表在一个固定宽度的div里，但我设置了两个span的float属性后，样式发生了错乱，请教达人怎样解决这个问题？
HTML结构如下：
<div>
<ul>
<li>
<span>新闻标题</span>
<span>(3月11日)</span>
</li>
</ul>
</div> 展开
HTML结构如下：
<div>
<ul>
<li>
<span>新闻标题</span>
<span>(3月11日)</span>
</li>
</ul>
</div> 展开
1个回答
展开全部
两种方法,一个是右浮的写在前面,定义右浮动
另一个是按顺序写,左边的定义左浮动,右边的定义右浮动,但这样外盒的高度要给定一下,要不容易出问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.top{
width:400px;border:1px solid gray;line-height:2em;
}
.left{
float:left;
display:inline;
}
.right{
float:right;
display:inline;
}
</style>
</HEAD>
<BODY>
右浮动:<div class="top"><span class="right">右边内容写在左边</span><span >左边内容写在右边</span></div>
左右浮动:<div class="top"><span class="left">左边内容写在左边</span><span class="right">右边内容写在右边</span></div>
</BODY>
</HTML>
另一个是按顺序写,左边的定义左浮动,右边的定义右浮动,但这样外盒的高度要给定一下,要不容易出问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.top{
width:400px;border:1px solid gray;line-height:2em;
}
.left{
float:left;
display:inline;
}
.right{
float:right;
display:inline;
}
</style>
</HEAD>
<BODY>
右浮动:<div class="top"><span class="right">右边内容写在左边</span><span >左边内容写在右边</span></div>
左右浮动:<div class="top"><span class="left">左边内容写在左边</span><span class="right">右边内容写在右边</span></div>
</BODY>
</HTML>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
