ホームページ >ウェブフロントエンド >htmlチュートリアル >div+cssスタイルシートでナビゲーションをコンパクトにする方法sheet_html/css_WEB-ITnose
div+cssスタイルシートでナビゲーションをコンパクトにする方法sheet_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:44:441335ブラウズ
代码如下：
68ccb177a5de0ef9542dde7d35bae727
97f2b6ae5f4f65bc7d15c6c9b9e8be8c
b2386ffb911b14667cb8f0f91ea547a7导航条6e916e0f7d1e588d4f442bf645aedb2f
080b747a20f9163200dd0a7d304ba388
body,div,ul,li{padding:0;margin:0 auto;}
#nav {
width:960px;
高さ:35ピクセル;
背景:#ccc;
マージン:0 自動;
margin-top:40px;
margin-left:12em;
マージン右:12em;
フロート:左;
}
#nav ul{list-style:none;width:960px;height:35px;}
#nav ul li{width:80px;float:left;line-height:35px;text-align:center;padding: 0 10px;font-family:微软雅黑;}
#nav ul li a{display:block;height:35px;font-size:16px;color;#333;text-decoration:none; float:left;}
#nav ul li a:hover{color:#fff;background:#000;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
eb545d6e9e25f5c0174408f6286375ad
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6 ee7959cc8dd4be16ef633321c03dac32首页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c622c09586c2098bc419dca4065d636f8c极客学院5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c622c09586c2098bc419dca4065d636f8cCSDN 博客5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c622c09586c2098bc419dca4065d636f8c51CTO5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66805e99d73be025f811ad0cfe2f7ec5cGitHub5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c622c09586c2098bc419dca4065d636f8c北大青鸟5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c622c09586c2098bc419dca4065d636f8c黑客联盟5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
adca8a5fa06ffeafb062c2e3f274b930
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
結果:
中间空隙很大怎么办?さらにマージン:0 auto; 不可能 div 居中
回复讨论(解决方案)
<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> this么快就搞定了，大神啊