社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
回复讨论(解决方案)
首頁 web前端 html教學 div+css样式表制作导航怎么使其紧凑排列_html/css_WEB-ITnose

div+css样式表制作导航怎么使其紧凑排列_html/css_WEB-ITnose

Jun 24, 2016 am 11:44 AM

代码如下：



导航条








结果为：
中间空隙很大怎么办？而且margin:0 auto;不能使div居中


回复讨论(解决方案)

1

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>导航条</title><style type="text/css">body,div,ul,li{padding:0;margin:0 auto;}#nav {width:960px;height:35px;background:#ccc;margin:0 auto;margin-top:40px;}#nav ul{list-style:none;width:960px;height:35px;}#nav ul li{float:left;line-height:35px;text-align:center;font-family:微软雅黑;margin:0px 5px;}#nav ul li a{display:block;font-size:16px;color;#333;text-decoration:none;padding:0px 5px;}#nav ul li a:hover{color:#fff;background:#000;}       #nav ul li a.first{margin-left:20px}    </style></head><body><center><div id="nav"><ul><li><a class="first" href="#">首页</a></li><li><a href="http://www.csdn.net/">极客学院</a></li><li><a href="http://www.csdn.net/">CSDN博客</a></li><li><a href="http://www.csdn.net/">51CTO</a></li><li><a href="https://github.com/">GitHub</a></li><li><a href="http://www.csdn.net/">北大青鸟</a></li><li><a href="http://www.csdn.net/">黑客联盟</a></li></ul></div></center></body></html>

登入後複製

这么快就搞定了，大神啊

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱門文章

倉庫：如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前 By DDD
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前 By 王林
顯示更多

熱門工具標籤

代碼&IT
音訊
商業
行銷
AI檢測器
聊天機器人
設計與藝術

熱門文章

倉庫：如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前 By DDD
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前 By 王林
顯示更多

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7300
9
Java教學
1622
14
CakePHP 教程
1342
46
Laravel 教程
1259
25
PHP教程
1206
29
顯示更多
Related knowledge
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？ 公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？ Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？

如何使用HTML5表單驗證屬性來驗證用戶輸入？ 如何使用HTML5表單驗證屬性來驗證用戶輸入？ Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入？

如何高效地在網頁中為PNG圖片添加描邊效果？ 如何高效地在網頁中為PNG圖片添加描邊效果？ Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果？

＆lt; iframe＆gt;的目的是什麼。 標籤？使用時的安全考慮是什麼？ ＆lt; iframe＆gt;的目的是什麼。 標籤？使用時的安全考慮是什麼？ Mar 20, 2025 pm 06:05 PM

＆lt; iframe＆gt;的目的是什麼。 標籤？使用時的安全考慮是什麼？

＆lt; meter＆gt;的目的是什麼。 元素？ ＆lt; meter＆gt;的目的是什麼。 元素？ Mar 21, 2025 pm 12:35 PM

＆lt; meter＆gt;的目的是什麼。 元素？

＆lt; datalist＆gt;的目的是什麼。 元素？ ＆lt; datalist＆gt;的目的是什麼。 元素？ Mar 21, 2025 pm 12:33 PM

＆lt; datalist＆gt;的目的是什麼。 元素？

HTML5中跨瀏覽器兼容性的最佳實踐是什麼？ HTML5中跨瀏覽器兼容性的最佳實踐是什麼？ Mar 17, 2025 pm 12:20 PM

HTML5中跨瀏覽器兼容性的最佳實踐是什麼？

＆gt; gt;的目的是什麼 元素？ ＆gt; gt;的目的是什麼 元素？ Mar 21, 2025 pm 12:34 PM

＆gt; gt;的目的是什麼 元素？

See all articles