Dreamweaver SPRY menu 選單列置中 (Spry Menubar Align Center)

Dreamweaver 的SPRY工具可以快速的製作選單列(SPRY選單列製作教學請看這一篇),但是水平選單預設對齊是”靠左”,可以經由修改css語法讓整個spry選單列置中。
預設的選單列是靠左對齊的


開啟「css樣式面板」,開啟之後會有Spry MenuBar預設的css樣式,只要修改ul.MenuBarHorizontal規則裡的屬性就可以了。

margin 改成 0 auto
width 改成 32em

width 改成 32em是在 ul.MenuBarHorizontal.li規則裡的width屬性,單一個選單是8em,預設四個選單就是32em

ul.MenuBarHorizontal {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 32em;/*依照MenuBar的選單數量x4*/
}

以下修改結果預覽

在〈Dreamweaver SPRY menu 選單列置中 (Spry Menubar Align Center)〉中有 4 則留言

  1. 靠右的話在spry menu的外面再放一層div
    透過外層div來控制靠右float:right
    這樣應該是比較方便的方法

  2. 您好!想請教您
    如果第一層選單要黑底+白字,第二層選單要白底+黑字,應該怎麼改?
    我嘗試改字顏色,但它css是統一字全部變色,
    感謝指導!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *