<!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字体样式去掉就可以了，字体影响浮动？
6 回答
已采纳
blovetu
TA贡献319条经验 获得超234个赞
上图是你的页面效果，为了能看清楚是哪个盒子，在此给每块加了不同的颜色
你把.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.好好理解一下，行元素，块元素，内联块元素及他们的区别；
_辣子
TA贡献12条经验 获得超2个赞
你的header高度是27px，header_right浮动了高度是28px，浮动的元素本身脱离了文档流，但是后面的元素会为浮动元素的文本，图片让出位置，header_right的高度比header高度高1px;所以logo_right右浮动后会卡在header_right的左边，去掉a的下划线样式可能是header_right的高度变低了，所以浮动到了最右边(我试的去掉下划线并没有浮动到最右边。。)
慕粉3770529
TA贡献1条经验 获得超0个赞
和字体样式没关系，你把comwidth的宽度设成1000px,本身就没有到最右边，改成100%就会有变化。而且在做之前最好清除一下自带格式margin:0;padding:0.
- 6 回答
- 0 关注
- 2012 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消