CSS如何讓浮動導航欄元素居中顯示
製作導航欄是最為基礎的佈局技能之一,當然對於稍有經驗的人員來說沒有任何問題,不過對於初學者可能會有一定的困擾。普通的導航欄一般具有一下幾個特點,整個導航欄居中,導航欄目具有,並且能夠均勻分佈,下面就是一個這樣的簡單程式碼例項。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none; } body{text-align:center;} li{ float:left; font-size:12px; } a{ float:left; border:1px solid #000; padding:5px 10px; text-decoration:none; color:#000; } ul{ display:inline-block; *display:inline; zoom:1; } </style> </head> <body> <ul> <li><a href="#nogo">首頁</a></li> <li><a href="#nogo">關於</a></li> <li><a href="#nogo">產品</a></li> <li><a href="#nogo">聯絡我們</a></li> <li><a href="#nogo">留言</a></li> </ul> </body> </html>
相關文章
- CSS 導航欄元素居中顯示CSS
- CSS如何居中一個float浮動元素?CSS
- CSS浮動float的導航欄小案例總結CSS
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- 滾動cell 顯示隱藏導航欄
- JS如何實現導航欄的智慧浮動JS
- 如果讓浮動div後面的元素換行顯示
- 浮動元素水平居中
- CSS_導航欄+固定浮動的回到頂部按鈕CSS
- css如何設定文字在li元素中垂直居中顯示CSS
- jQuery側邊欄隱藏和顯示導航jQuery
- UIView顯示時遮擋導航欄的方法UIView
- 在 Flutter 中實現一個浮動導航欄Flutter
- App之上下滑動UIScrollview隱藏或者顯示導航欄APPUIView
- css 元素顯示模式CSS模式
- Qt如何讓彈出的視窗居中顯示QT
- Qt介面設計如何讓文中居中顯示?QT
- JavaScript滑鼠懸浮展開側欄導航JavaScript
- Android 顯示、隱藏狀態列和導航欄Android
- css3滑鼠懸浮背景滑動導航選單CSSS3
- 如何讓win32對話方塊居中顯示Win32
- CSS導航欄及下拉選單CSS
- ElementUI側邊欄導航選單隱藏顯示問題UI
- css3實現動態圓形導航欄CSSS3
- 子元素浮動不能正常顯示的解決辦法
- 常用元件 / 導航欄及圖示元件
- css如何讓div顯示在最上層CSS
- 側欄懸浮導航選單拖動滾動條可以自動定位效果
- html之如何讓多個並列的div居中顯示HTML
- CSS——讓“盒子”動起來:① 浮動CSS
- 純CSS打造淘寶導航選單欄CSS
- 如何讓絕對定位的元素水平居中
- Qt 讓彈出的視窗居中顯示QT
- win10 工作列居中顯示如何設定_win10怎麼讓工作列圖示居中Win10
- html/css 滾動到元素位置,顯示載入動畫HTMLCSS動畫
- 如何讓超出範圍的文字自動顯示為省略號(CSS)CSS
- html+css 製作簡易導航欄HTMLCSS
- CSS浮動元素特點有什麼CSS