コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > div+cssスタイルシートでナビゲーションをコンパクトにする方法sheet_html/css_WEB-ITnose

div+cssスタイルシートでナビゲーションをコンパクトにする方法sheet_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:44:44
オリジナル
1339 人が閲覧しました

代码如下：



导航条








結果:
中间空隙很大怎么办?さらにマージン: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么快就搞定了，大神啊

関連ラベル：
div+css样式表制作导航怎么使其紧凑排列
ソース：php.cn
前の記事：HTMLリストtag_html/css_WEB-ITnose 次の記事：アジャイル中国語が HTML5+CSS3+JS モバイル アプリケーション開発フレームワークを生成_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2056
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2211
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1865
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1750
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1776
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート