<style>*{ margin: 0; padding: 0;}.clearfix:after{ content: ""; display:block; height: 0; overflow: hidden;? clear: both;}.clearfix{ *zoom:1;} ?.left{ width: 214px; height: 192px; border: 3px solid red; margin:10px;}.left_in{ width: 208px; height: 186px; border: 3px solid #ccc ;}.left_in h2{ background: url(imgs/left_title2.png) no-repeat center right; font-size: 14px; width:206px; height: 33px; line-height: 33px; border-bottom: 1px dotted #CBCBCB; border: 1px solid red;}.left_in h2 span{ display: block; background: url(imgs/left1.png) no-repeat center;? height:33px; width:25px; margin-right: 20px; border: 1px solid red; float:left;}</style></head><body> <div class='left'> <div class="left_in"> <h2 class="clearfix"><span></span>標題</h2> 內容 </div> </div> </body></html>顯示的是1.為什么“內容“不是在下面靠左邊的位置呢，2.（1）.當我把.left_in h2 span里的display:block換成display:inline-block，去掉float:left時，就會出現"標題"下沉的情況，但‘內容’就正常了，顯示是：（2）.當把h2中的height去掉，只保留line-height:33px;時，h2就變寬了，就會出現這種情況（3）.當設置h2的margin-top:-5px;時，也不行。出現如下應該怎樣寫才能讓”標題“出現在藍色條的中間，內容也能正?？孔筮咃@示呢。大神幫幫忙！
4 回答
玩意11
TA貢獻14條經驗 獲得超10個贊
.left_in h2 {
??? background: url(imgs/left_title2.png) no-repeat center right;
??? font-size: 14px;
??? width: 206px;
??? height: 33px;
??? line-height: 33px;
??? border-bottom: 1px dotted #CBCBCB;
??? border: 1px solid red;
}
把高度height:33px;去掉就好了
- 4 回答
- 0 關注
- 2065 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消