<!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 關注
- 2083 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消