css 定义的标题和日期不在同一行，请好心人帮忙
刚做了个站可是标题和日期怎么都不在一行郁闷死了http://www.money369.cn/相应的css/*正文左边-首页*/.main.left.index{margi...
刚做了个站 可是标题和日期怎么都不在一行 郁闷死了
http://www.money369.cn/
相应的css
/* 正文左边-首页 */
.main .left .index{margin-bottom:2px}
.main .left .index .pic{
float:left;
height:225px;
width:232px;
margin-right: 5px;
padding: 2px;
border: 1px solid #CCCCCC;
}
.main .left .index .new{float:left;width:380px}
.main .left .index .new ul{list-style:none;padding:0px;margin:0px;overflow:hidden}
.main .left .index .new ul li{padding:4px 0px 3px 2px;border-bottom:1px dashed #fff}
.main .left .index .new ul li .mtime{font-size:12px;color:#ccc;float:right}
.main .left .index .new ul li .mnow{font-size:12px;color:#f00;float:right}
.main .left .index .new ul a{font-size:14px;color:#333;text-decoration:none}
.main .left .index .new ul a:hover{color:#00F}
mtime 和 mnow 是日期的css
请大家帮忙了~！！ 展开
http://www.money369.cn/
相应的css
/* 正文左边-首页 */
.main .left .index{margin-bottom:2px}
.main .left .index .pic{
float:left;
height:225px;
width:232px;
margin-right: 5px;
padding: 2px;
border: 1px solid #CCCCCC;
}
.main .left .index .new{float:left;width:380px}
.main .left .index .new ul{list-style:none;padding:0px;margin:0px;overflow:hidden}
.main .left .index .new ul li{padding:4px 0px 3px 2px;border-bottom:1px dashed #fff}
.main .left .index .new ul li .mtime{font-size:12px;color:#ccc;float:right}
.main .left .index .new ul li .mnow{font-size:12px;color:#f00;float:right}
.main .left .index .new ul a{font-size:14px;color:#333;text-decoration:none}
.main .left .index .new ul a:hover{color:#00F}
mtime 和 mnow 是日期的css
请大家帮忙了~！！ 展开
4个回答
展开全部
按我的来 保证没有问题 不用写什么margin移位这种来画蛇添足了
浏览器全面兼容
我发现你的页面在firefox有移位哦 注意标准写法
<!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=utf-8" />
<title>无标题文档</title>
<style>
ul li {
margin:0;
padding:0;
width:500px;
line-height:25px;
}
a {
color:#000
}
a:hover {
color:#666
}
li a {
width:800px;
background:#f00;
display:inline-block;
}
li a span {
width:400px;
background:#0f0;
display:inline-block;
float:left;
}
li a span.l {
width:200px;
background:#0f0;
display:inline-block;
float:right;
}
</style>
</head>
<body>
<div style="height:700px"> <img src="3.10湖南检察院.jpg" width="300" height="300" style="float:left; "/>
<ul style="list-style:none; padding:0; margin:0; width:500px; height:500px; float:left; margin-left:20px; ">
<li><a href="#"><span>奥巴马就职后对中国持敌对态度，中国高层很懊恼！</span><span class="l">2009-08-08</span></a></li>
<li><a href="#"><span>奥巴马就职后对中国持敌对态度，中国高层很懊恼！</span><span class="l">2009-08-08</span></a></li>
<li><a href="#"><span>奥巴马就职后对中国持敌对态度，中国高层很懊恼！</span><span class="l">2009-08-08</span></a></li>
<li><a href="#"><span>奥巴马就职后对中国持敌对态度，中国高层很懊恼！</span><span class="l">2009-08-08</span></a></li>
<li><a href="#"><span>奥巴马就职后对中国持敌对态度，中国高层很懊恼！</span><span class="l">2009-08-08</span></a></li>
</ul>
</div>
</body>
</html>
浏览器全面兼容
我发现你的页面在firefox有移位哦 注意标准写法
<!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=utf-8" />
<title>无标题文档</title>
<style>
ul li {
margin:0;
padding:0;
width:500px;
line-height:25px;
}
a {
color:#000
}
a:hover {
color:#666
}
li a {
width:800px;
background:#f00;
display:inline-block;
}
li a span {
width:400px;
background:#0f0;
display:inline-block;
float:left;
}
li a span.l {
width:200px;
background:#0f0;
display:inline-block;
float:right;
}
</style>
</head>
<body>
<div style="height:700px"> <img src="3.10湖南检察院.jpg" width="300" height="300" style="float:left; "/>
<ul style="list-style:none; padding:0; margin:0; width:500px; height:500px; float:left; margin-left:20px; ">
<li><a href="#"><span>奥巴马就职后对中国持敌对态度，中国高层很懊恼！</span><span class="l">2009-08-08</span></a></li>
<li><a href="#"><span>奥巴马就职后对中国持敌对态度，中国高层很懊恼！</span><span class="l">2009-08-08</span></a></li>
<li><a href="#"><span>奥巴马就职后对中国持敌对态度，中国高层很懊恼！</span><span class="l">2009-08-08</span></a></li>
<li><a href="#"><span>奥巴马就职后对中国持敌对态度，中国高层很懊恼！</span><span class="l">2009-08-08</span></a></li>
<li><a href="#"><span>奥巴马就职后对中国持敌对态度，中国高层很懊恼！</span><span class="l">2009-08-08</span></a></li>
</ul>
</div>
</body>
</html>
参考资料： http://hi.baidu.com/kingtent
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
呵呵 因为你的 mtime 和 mnow float之后成了块级元素，会自动换行的。
你只需要在他们里面再加入一个 display:inline; 就OK了~
你只需要在他们里面再加入一个 display:inline; 就OK了~
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
DIV是块元素
span是行内元素
为“时间”设定 行内元素
在CSS进行span的样式设计
不用Span也可以
例：
.Texts{
display:block;
margin:4px 0 3px 15px;
float:left;
}
h7{
float:right;
display:block;
margin:4px 5px 3px 0px;
确定这两个CSS定义在同一个块元素内，则.Texts 是控制标题显示，h7是控制时间的样式
分别逆方向浮动并margin调整外边距 达到满意效果
display:block;可以是文字也可以设置 内外边距！
span是行内元素
为“时间”设定 行内元素
在CSS进行span的样式设计
不用Span也可以
例：
.Texts{
display:block;
margin:4px 0 3px 15px;
float:left;
}
h7{
float:right;
display:block;
margin:4px 5px 3px 0px;
确定这两个CSS定义在同一个块元素内，则.Texts 是控制标题显示，h7是控制时间的样式
分别逆方向浮动并margin调整外边距 达到满意效果
display:block;可以是文字也可以设置 内外边距！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.main .left .index .new ul a {
color:#333333;
float:left;-------添加这一行,既在列表中的a标签加一个向左浮动的属性
font-size:14px;
text-decoration:none;
}
color:#333333;
float:left;-------添加这一行,既在列表中的a标签加一个向左浮动的属性
font-size:14px;
text-decoration:none;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
