字体影响浮动？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style type="text/css">
/*公共*/
.comwidth{
margin:0 auto;
width:1000px;
}
/*header部分*/
body {
background-color: #F5F5F5;
}
.header{
height: 27px;
line-height: 27px;
}
.header_right{
float: right;
}
.header_right a{
font:12px/27px 微软雅黑;
padding-left: 10px;
margin-right: 8px;
color: #8E8E8E;
}
.header_right a:hover{
color: red;
}
/*body部分*/
.logo_pic{
width: 375px;
float: left;
}
.logo_right {
width: 300px;
height: 28px;
margin-top: 30px;
float: right;
display: inline;
color: #8E8E8E;
}
</style>
</head>
<body>
<div class="header">
<div class="comwidth">
<div class="header_right">
<a href="#">设为首页</a><a href="#">加入收藏</a><a href="#">联系我们</a>
</div>
</div>
</div>
<div class="main">
<div class="comwidth">
<div class="logo">
<div class="logo_pic">
我我我
</div>
<div class="logo_right">
呵呵呵呵
</div>
</div>
</div>
</div>
</body>
</html>main里面的logo_right设置了右浮动但不能贴到边显示，我把header_right里的a字体样式去掉就可以了，字体影响浮动？
啊啊啊啊123浏览 2136回答 6
6回答
-
blovetu
上图是你的页面效果，为了能看清楚是哪个盒子，在此给每块加了不同的颜色 你把.header里的line-height去掉，line-height是行高，你要加也是给字体加，不要用这个line-height去撑盒子，盒子的高就是height;去完后，效果就可以实现了；在此给点建议导航最好用列表ul li去做；做完之后最好清下浮动，那块用了float就给父级盒子加一个.clearfix ,你可以把这下面段代码放到你的公共样式里去.clearfix:after, .clearfix:before { display: table; content: ""; } .clearfix:after { clear: both; } .clearfix { *zoom:1; } 3.好好理解一下，行元素，块元素，内联块元素及他们的区别； -
_辣子
你的header高度是27px，header_right浮动了高度是28px，浮动的元素本身脱离了文档流，但是后面的元素会为浮动元素的文本，图片让出位置，header_right的高度比header高度高1px;所以logo_right右浮动后会卡在header_right的左边，去掉a的下划线样式可能是header_right的高度变低了，所以浮动到了最右边(我试的去掉下划线并没有浮动到最右边。。) -
慕粉3770529
和字体样式没关系，你把comwidth的宽度设成1000px,本身就没有到最右边，改成100%就会有变化。而且在做之前最好清除一下自带格式margin:0;padding:0. -
Rimas
给logo_right清除浮动 -
田心枫
.comwidth{margin:0 auto;width:1000px;}里面的width:1000px;去掉试试
随时随地看视频慕课网APP
Html/CSS