html5将div中的文字变大，文字为什么会下移？截图代码如下要怎么改
应该是这样的效果：可是我做完以后为什么这样，25后面换行May后下移一行，但是25还在那个地方：代码如下：<!DOCTYPEhtml><htmllang="zh"><me...
应该是这样的效果：
可是我做完以后为什么这样，25后面换行May后下移一行，但是25还在那个地方：
代码如下：
<!DOCTYPE html>
<html lang = "zh">
<meta charset = "UTF-8">
<style type="text/css">
.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}
.date p {
font-family: Helvetica, sans-serif;
font-size: 100px; text-align: center; color: #9e9e9e;
}
</style>
<body>
<div class="date">
<p>25<span>May</span></p>
</div>
</body>
</html> 展开
可是我做完以后为什么这样，25后面换行May后下移一行，但是25还在那个地方：
代码如下：
<!DOCTYPE html>
<html lang = "zh">
<meta charset = "UTF-8">
<style type="text/css">
.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}
.date p {
font-family: Helvetica, sans-serif;
font-size: 100px; text-align: center; color: #9e9e9e;
}
</style>
<body>
<div class="date">
<p>25<span>May</span></p>
</div>
</body>
</html> 展开
3个回答
展开全部
对span设置一个display：block；就行了，还有就是要设置margin：0；padding：0；
或者直接把span换成块标签
还有就是给25套个标签，然后宽度设置100%也行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
*{margin:0;padding:0;}
.date {
width:320px;
height: 160px;
line-height:160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}
.date p {
font-family: Helvetica, sans-serif;
font-size: 100px; text-align: center; color: #9e9e9e;
}
</style>
<body>
<div class="date">
<p>25<span>May</span></p>
</div>
很多标签默认是有边距的，写CSS前记得先清空一下。
HTML标签CSS默认属性值大全：http://blog.sina.com.cn/s/blog_6a3c6f810100ydiy.html
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html lang = "zh">
<meta charset = "UTF-8">
<style type="text/css">
.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
position:relative;
}
.date p {
font-family: Helvetica, sans-serif; text-align:center; font-size:80px; color:#9e9e9e;
position:absolute; top:-90px; left:0px;
}
.date p span{ display:block;}
</style>
<body>
<div class="date">
<p>25<span>May</span></p>
</div>
</body>
</html>
这样可以吗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
