這篇文章主要為大家展示了“負margin怎么用”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“負margin怎么用”這篇文章吧。
創新互聯主營泗洪網站建設的網絡公司,主營網站建設方案,手機APP定制開發,泗洪h5微信小程序搭建,泗洪網站營銷推廣歡迎泗洪等地區企業咨詢1. 實現左右兩列布局
方法一:
<div> <div style="float:left;width:200px;">左側</div> <div style="margin-left:200px;background:#999;">右側</div> </div>
方法二:
<div> <div style="width:200px;height:200px;">左側</div> <div style="margin-left:200px;margin-top:-200px;">右側</div> </div>
對比兩種方法,第一種用到float,弊端就是應用float在IE中可能引起很多bug,第二種的話用-margin,本事還是比較贊的,暫時沒發現沒事問題;
2.導航欄
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; border: 0; padding: 0; } ul{ overflow: hidden; } ul li{ background: #999; border-left: 1px solid #000; width:60px; height:30px; float: left; list-style: none; text-align: center; margin-left:-1px; } </style> </head> <body> <div style="margin-left:20px;"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
或者:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; border: 0; padding: 0; } ul{ } ul li{ background: #999; border-left: 1px solid #000; border-right: 1px solid #000; width:60px; height:30px; float: left; list-style: none; text-align: center; margin-left:-1px; } </style> </head> <body> <div style="margin-left:20px;"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
合理使用overflow以及-margin 。
以上是“負margin怎么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯行業資訊頻道!
標題名稱:負margin怎么用-創新互聯
本文URL:http://vcdvsql.cn/article30/hosso.html
成都網站建設公司_創新互聯,為您提供營銷型網站建設、網站設計、網站策劃、網站建設、網站收錄、移動網站建設
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯