<!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="#">設(shè)為首頁</a><a?href="#">加入收藏</a><a?href="#">聯(lián)系我們</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設(shè)置了右浮動(dòng)但不能貼到邊顯示，我把header_right里的a字體樣式去掉就可以了，字體影響浮動(dòng)？
6 回答
已采納
blovetu
TA貢獻(xiàn)319條經(jīng)驗(yàn) 獲得超234個(gè)贊
上圖是你的頁面效果，為了能看清楚是哪個(gè)盒子，在此給每塊加了不同的顏色?
你把.header里的line-height去掉，line-height是行高，你要加也是給字體加，不要用這個(gè)line-height去撐盒子，盒子的高就是height;去完后，效果就可以實(shí)現(xiàn)了；
在此給點(diǎn)建議
導(dǎo)航最好用列表ul li去做；
做完之后最好清下浮動(dòng)，那塊用了float就給父級(jí)盒子加一個(gè).clearfix ,你可以把這下面段代碼放到你的公共樣式里去
.clearfix:after,?.clearfix:before?{
??display:?table;
??content:?"";
}
.clearfix:after?{
??clear:?both;
}
.clearfix?{
??*zoom:1;
}? 3.好好理解一下，行元素，塊元素，內(nèi)聯(lián)塊元素及他們的區(qū)別；
_辣子
TA貢獻(xiàn)12條經(jīng)驗(yàn) 獲得超2個(gè)贊
你的header高度是27px，header_right浮動(dòng)了高度是28px，浮動(dòng)的元素本身脫離了文檔流，但是后面的元素會(huì)為浮動(dòng)元素的文本，圖片讓出位置，header_right的高度比header高度高1px;所以logo_right右浮動(dòng)后會(huì)卡在header_right的左邊，去掉a的下劃線樣式可能是header_right的高度變低了，所以浮動(dòng)到了最右邊(我試的去掉下劃線并沒有浮動(dòng)到最右邊。。)
慕粉3770529
TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊
和字體樣式?jīng)]關(guān)系，你把comwidth的寬度設(shè)成1000px,本身就沒有到最右邊，改成100%就會(huì)有變化。而且在做之前最好清除一下自帶格式margin:0;padding:0.
添加回答
舉報(bào)
0/150
提交
取消