请教CSS达人，怎样在li中设置两个span标记左右浮动？

我想在一个无序列表中显示新闻标题，标题向左浮动，新闻发布日期向右浮动，列表在一个固定宽度的div里，但我设置了两个span的float属性后，样式发生了错乱，请教达人怎样解决这个问题？
HTML结构如下：
<div>
<ul>
<li>
<span>新闻标题</span>
<span>(3月11日)</span>
</li>
</ul>
</div>

举报该问题

其他回答

第1个回答推荐于2018-02-25

两种方法,一个是右浮的写在前面,定义右浮动

另一个是按顺序写,左边的定义左浮动,右边的定义右浮动,但这样外盒的高度要给定一下,要不容易出问题

<!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>本回答被提问者和网友采纳

相似回答

怎样在li中设置两个span标记左右浮动?答：两种方法,一个是右浮的写在前面,定义右浮动\x0d\x0a\x0d\x0a另一个是按顺序写,左边的定义左浮动,右边的定义右浮动,但这样外盒的高度要给定一下,要不容易出问题\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0aNewDocument\x0d\x0a\x0d\x0a.top{\x0d\x0awidth:400px...

大家正在搜

设置li标签向左浮动 li中的a标签设置问题 li标签的距离怎么设置房产达人怎么设置不卡 ul怎么设置样式设置li样式设置中怎么没有通用 qq设置qq达人不显示 qq达人怎样能不显示