为了账号安全,请及时绑定邮箱和手机立即绑定

导航栏跟logo栏之间有一段空格是怎么样回事

http://img1.sycdn.imooc.com//58f9ec3a000150a910300250.jpg

导航栏跟logo栏之间有一段空格是怎么样回事啊

正在回答

4 回答

在img中设置display:block或者vertical-align: bottom属性。就会完美解决了,原因是img的边距和父级的div的baseline是持平的,而baseline默认还与div的边距存在间距

0 回复 有任何疑惑可以回复我~
#1

qq_慕娘9483466

还是不行,只会用clear:both,可以把.logo的高度增加,让他看起来是紧贴在一起的,这个float用了之后感觉会出好多问题
2018-12-09 回复 有任何疑惑可以回复我~

nav左浮动

0 回复 有任何疑惑可以回复我~

还是没有解决。咋个弄呢?

@charset "utf-8";

/* CSS Document */


*

{

margin:0;

padding:0;

font-size:12px;/*表示全局声明div的边框外部和元素距离为0*/

}


body{

background: #BBBBBB;/*body背景颜色*/

}


.top{

width:100%;

height:27px;

background:url(../images/top_bg.jpg) repeat-x;

}


.top_content{

width:1000px;

margin:0 auto;

}


.top_content li{/*content下面的li 属性设置*/

list-style-image:url(../images/li_bg.gif);

float:right;

line-height:27px;

width:70px;

}


.top_content a:link,.top_content a:visited{/*content下面的链接去掉颜色和下划线*/

color:#FF0004;

text-decoration:none;

}


.top_content a:hover,.top_content a:active{/*鼠标经过的样子和点击不要下划线*/

color:#FFBE00;

text-decoration:none;

}


.wrap

{width:1000px;margin:0 auto;}


.logo

{height:80px;background-color:#FFFFFF}

.logo_left

{width:10px;float:left;}

.logo_right

{width:300px;float:right;  margin-top:30px;height:80px;color:#635353;}


.logo_right img{

vertical-align:middle; margin-right:10px;}

.tel

{font-family:"微软雅黑"; font-size:16px; color:#FF0027;}



.nav{

height:40px;clear:both;}


.nav_left{width:10px;

height:40px;

background:url(../images/nav_left.jpg) no-repeat;

float:left;}


.nav_mid{

width:980px;

background:url(../images/nav_bg.jpg) repeat-x;

float:left;}


.nav_right{

width:10px;

height:40px;

background:url(../images/nav_right.jpg) no-repeat;

float:left;}

.nav_mid_left,.nav_mid_right{

float:left;}

.nav_mid_left{

width:680px;}

.nav_mid_right{

width:300px;}

.nav_mid_left li

    list-style:none;

line-height:40px;

text-align:center;/*文字居中*/

width:80px;

float:left;

}

.nav_mid_left a:link,.nav_mid_left a:visited{

color: #FFFFFF;


text-decoration:none;

font-size:16px;

font-family:"微软雅黑";

}

.nav_mid_left a:hover,.nav_mid_left a:active{

color: #BCE500;

text-decoration:none;

font-size:16px;

font-family:"微软雅黑";

}

.search_text{

width:190px;

height:25px;

background:url(../images/search.jpg) no-repeat right center ;

margin-top:5px;

background-color:#FFFFFF;

padding-right:25px;

border:1px solid #FFFFFF;

}


0 回复 有任何疑惑可以回复我~

可能有默认margin或者padding,试试重置掉

0 回复 有任何疑惑可以回复我~
#1

胡鸿远 提问者

找到了 .logo_right {width:300px;float:right; margin-top:30px;height:80px;color:#635353;} 这个里面的总高度是80px, margin-top:30px; 就剩下50px 了,改了就好了,谢谢
2017-05-04 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

导航栏跟logo栏之间有一段空格是怎么样回事

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信