關於導航欄的li標籤不在父級div下同行顯示
阿新 • • 發佈:2018-12-19
試著寫一個簡單的導航欄,給li標籤設定了浮動,雖然li標籤同行了,但是發現li標籤不在div內(指如果高度不夠長,我div高度是40px),試了好多,原來是忘了清楚浮動,上程式碼!! 我的是HTML5,至於其他的還沒嘗試過
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> //就是這個"*",清除所有標籤的外邊距和內邊距, * { margin:0px; padding:0px; } #div1 { height: 40px; width: 100%; border: 1px solid red; background-image: url(css/logo.png); background-repeat: no-repeat; background-size:70px 37px ; background-position-x: 10px; } #div1 ul { border: 1px solid green; width: 300px; height: 40px; list-style: none; margin-left: 100px; } #div1 ul li{ border: 1px solid black; float: left; margin:8px 28px 8px 0px; } a:link { text-decoration: none; color: #000000; } a:hover { color: red; } </style> </head> <body> <div id="div1"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">部落格</a></li> <li><a href="#">留言板</a></li> <li><a href="#">個人資訊</a></li> </ul> </div> </body> </html>