不知哪里设错，新闻中心 line height 不生效还有这个 more<< 无法居中

源自：-

不知哪里设错，新闻中心 line height 不生效还有这个 more<< 无法居中

代码如下主要在是news这个div的上中部分出问题，求大神帮忙看下

<!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>
<link href="css/stylesheet.css"type="text/css"rel="stylesheet" />
<script src="js/setHomeSetFav.js" type="text/javascript"></script>
<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_fancy.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_fancy.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
myFocus.set({id:"picBox", time:1.5 ,})
</script>
</head>

<body>
<div class="header">
     <div class="top_nav">
       <ul>
           <li><a href="#">联系我们</a></li>
           <li><a href="#">加入收藏</a></li>
           <li><a href="#">设为首页</a></li>
       </ul>
   </div>
</div>

<div class="wrap">
   <div class="logo">
       <div class="logo_left"><img src="images/logo.jpg" alt="慕课网"/></div>
       <div class="logo_right"><img src="images/tel.jpg" alt="服务热线"/>24小时服务热线：<span>123-456-7890</span></div>
   </div>
    <div class="nav">
          <div class="left_nav"></div>
          <div class="main_nav">
                  <div class="main_nav_left">
                          <ul>
                                <li><a href="#">首页</a></li>
                                <li><a href="#">慕课首页</a></li>
                                <li><a href="#">新闻动态</a></li>
                                <li><a href="#">课程中心</a></li>
                                <li><a href="#">在线教程</a></li>
                                <li><a href="#">人才招聘</a></li>
                          </ul>
                  </div>
                  <div class="main_nav_right">
                          <form action="" method="post">
                             <input type="text" class="search"/>
                          </form>
                   </div>
         </div>
      <div class="right_nav"></div>
</div>
         <div class="ab" id="picBox">
                 <div class="loading"><img src="images/loading.gif" alt="图片加载中" /></div>
                 <div class="pic">
                       <ul>
                            <li><img src="images/ad2.jpg" /></li>
                            <li><img src="images/ad3.jpg" /></li>
                            <li><img src="images/ad4.jpg" /></li>
                       </ul>
                </div>
         </div>
</div>
<div class="main">
    <div class="news">
          <div class="title">
                 <h3 class="title_left">新闻列表</h3>
                 <span class="title_right"><a href="#" >More>></a></span>
      </div>
      <div class="pic_news">
                       <div class="pic_news_left">
                       <img src="images/news.jpg" width="113" height="80" />
            </div>
        <div class="pic_news_right">
                       <h2 ><a href="#">520 慕女神喊你来表白!</a></h2><p>活动时间：5月20日—5月25日<br />获奖公布时间：5月26日<br /><a href="#">Learn More>></a></p>
        </div>
                 </div>
                <div class="news_list">
                        <ul>
                              <li><span>2014-06-01</span> <a href="news.html">【慕客访谈用户篇】“有为屌丝”在路上</a></li>
                              <li><span>2014-06-01</span><a href="news.html">【有奖活动】给父亲的三行书信</a></li>
                              <li><span>2014-05-30</span><a href="news.html">《程序猿，请晒出你的童年》活动获奖公告</a></li>
                              <li><span>2014-05-28</span><a href="news.html" title="aa">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></li>
                       </ul>
              </div>
       </div>
</div>
      <div class="course"></div>
      <div class="sidebar"></div>
</div>
</body>
</html>

样式表：

*{
margin:0;
padding:0;
font:12px 微软雅黑;
}
body{
background-color: #F5F5F5;
}
ul{
list-style-type:none;
}
.wrap{
   width:1000px;
   margin:0 auto;
}
.header{
width:100%;
background:url(images/top_bg.jpg) repeat-x;
}
.top_nav{
width:1000px;
margin:0 auto;
height:30px;
}
.top_nav li{
float:right;
width:70px;
line-height:30px;
list-style-image:url(../images/arrow.jpg);
}
.top_nav a:link, .top_nav a:visited{
color:#8E8E8E;
text-decoration:none;
}
.top_nav a:hover, .top_nav a:active{
color:#C00;
text-decoration:none;
}
.wrap{
width:1000px;
margin:0 auto;
}
.logo{
height:80px;
background:#fff;
}
.logo_left{
float:left;
width:300px;
}
.logo_right{
float:right;
width:300px;
height:28px;
margin-top:30px;
color:#8E8E8E;
}
.logo_right img{
vertical-align:middle;
margin-right:10px;
}
.logo_right span{
color:#C00;
font-size:16px;
font-family:"微软雅黑";
}
.nav{
   height:40px;
   width:1000px;
   margin:0 auto;
}
.left_nav{
   width:10px;
   background:url(../images/nav_left.jpg) no-repeat;
}
.main_nav{
   width:980px;
   background:url(../images/nav_bg.jpg) repeat-x;}
.right_nav{
   width:10px;
   background:url(../images/nav_right.jpg) no-repeat;
}
.left_nav, .main_nav, .right_nav{
   height:40px;
   float:left;
   display:inline;
}
.main_nav_left, .main_nav_right{
   float:left;
}
.main_nav_left{
   width:680px;
}
.main_nav_right{
   width:300px;
}
.main_nav_left li{
   float:left;
   width:100px;
   text-align:center;
   line-height:40px;
}
.main_nav_left a:link, main_nav_right a:visited{
   text-decoration:none;
   color:#fff;
   font-size:15px;
   font-family:"微软雅黑"
}
.main_nav_left a:hover, main_nav_right a:active{
   text-decoration:none;
   color:#CF0;
   font-size:15px;
   font-family:"微软雅黑"
}
.main_nav_right .search{
   width:200px;
   height:25px;
   margin-top:5px;
   border:#999 1px solid;
   background:url(../images/search.jpg) no-repeat right center;
   background-color:#fff;
   padding-right:25px;
}

.ab{
   height:310px;
    overflow:hidden;
}
.main{
   width:1000px;
   margin:5px auto;
   background: #FFF;
}
.news{
   width:340px;
   background:#fff;
}
.course{
   width:410px;
   margin:0 7px;
}
.sidebar{
   width:230px;
   background:red;
}
.news, .course, .sidebar{
   height:250px;
   float:left;
   border:#E8E8E8 1px solid;
}
.title {
   height:35px;
   border-bottom: 2px solid #E8E8E8;
}
.title_left{
   width:70%;
   font-size:15px;
   font-family:"微软雅黑";
   font-weight:bold;
   color:#786F66;
   float:left;
   line-height:35px;
   padding-left:20px;
}
.title_right {
   width: 20%;
   height:35px;
   text-align:center;
   line-height:35px;

}
.title_right a{
   text-decoration:none;
   color:#999;
   font-size:10px;
   font-family:"微软雅黑"
}
.pic_news {
   height:80px;
   margin-top:10px;
   line-height:20px;
}
.pic_news_left {
   float:left;
   height:85px;
   margin:0 5px;
}
.pic_news_right{
   float:left;
   font:14px 宋体;
}
.pic_news a{
   color:#c00;
    text-decoration:none;
}

提问者：qq_下雨天_2 2015-10-17 21:17

个回答

Perona

2015-10-18 14:30:29

已采纳

首先要明白span元素和a元素都是内联元素。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
```
<span class="title_right"><a href="#" >More&gt;&gt;</a></span>
```
css样式
```
.title_right {
    width: 20%;
    height:35px;
    text-align:center;
    line-height:35px;

}
.title_right a{
    text-decoration:none;
    color:#999;
    font-size:10px;
    font-family:"微软雅黑"
}
```
那么这里我们要让它居中显示，那么就是要让它宽度可以设置，那么长度宽度可以设置的话也就是要把内联元素变成行内块元素。即加上display: inline-block;
现在咱们再讲下这个line-height和font-size的关系。首先需要理解line-height的意思，它是css中表示的行高，font-size的意思是字体的大小，如多少px，之间关系是字体大小越大，那么必然的行高是肯定比较大的。
这里的span元素的字体大小是从父元素那里继承过来，那么使用line-height很明显达不到我们要的效果。而本身a元素已经设置了font-size，那么就应该把line-heigh设置给a元素。
即css样式如下
```
.title_right {
    display: inline-block;
    width: 20%;
    height:35px;
    text-align:center;
    }
.title_right a{
    display: inline-block;
    text-decoration:none;
    color:#999;
    font-size:10px;
    font-family:"微软雅黑";
    line-height: 35px;
}
```
1
qq_下雨天_2

2015-10-19 17:31:13

很感谢，上面这个问题已经解决了，不过还有就是新闻中心 class为news这块中间的pic news 为什么跟老师那样设置，图片旁边这块<p>标签的文字不能够出现行高，<h2><P>又都是块级元素，一直搞不清这个问题，希望能解答下，下面是代码
html代码：
<div class="pic_news"> <img src="images/news.jpg" alt="520 慕女神喊你来表白" width="113" height="77" />
        <h2><a href="news.html">520 慕女神喊你来表白！</a></h2>
        <p>活动时间：5月20日—5月25日<br />
          获奖公布时间：5月26日<br />
          <a href="news.html">Learn More>></a></p>
      </div>
css代码：
.pic_news{
   height:80px;
   line-height:22px;
   margin-top:10px;
}
.pic_news img{
   float:left;
   padding:0 5px;
}
.pic_news a{
   display:inline-block;
   color:#c00;
}

0