ul li橫向排列及圓點處理

2021-09-06 23:29:01 字數 519 閱讀 2121

如何用css製作橫向選單 讓ul li橫向排列及圓點處理

第一步:建立乙個無序列表

我們先建立乙個無序列表,來建立選單的結構。**是:

效果是:

第二步:隱藏li的預設樣式,去掉圓點

因為看起來不是很好看,選單通常都不需要li預設的圓點,我們給ul定義乙個樣式來消除這些圓點。

當然,為了更好的控制整個選單,我們把選單放在乙個div裡。頁面**變成:

css定義為:.test ul

說明:「.test ul」表示我要定義的樣式將作用在test的層裡的ul標籤上。

現在的效果是沒有圓點了:

首頁產品介紹

服務介紹

技術支援

立刻購買

第三步:關鍵的浮動

這裡是選單變成橫向的關鍵,我們給li元素加上乙個「float:left;」屬性,讓每個li浮動在前面乙個li的左面。

css定義為:.test li

效果是:

看,選單變橫向了。就這麼簡單!下面需要做的就是優化細節了

橫向導航(ul li)實現

1 生成site.css檔案 注 一定要將該檔案的編碼格式設定為utf 8,否則ie6有可能出現亂碼 ul li以橫排顯示 所有class為menu的div中的ul樣式 div.menu ul 所有class為menu的div中的ul中的li樣式 div.menu ul li 所有class為men...

WPF ListBox 橫向排列

如果只是單純的讓listbox可以橫向配列,這樣很簡單,只需要更改listbox的itemspanel模板就可以,例如 listbox listbox.itemspanel itemspaneltemplate itemspaneltemplate listbox.itemspanel listbo...

圓排列問題

給定n個大小不等的圓 c1,c2,cn,現要將這 n個圓排進乙個矩形框中,且要求各圓與矩形框的底邊相切。圓排列問題要求從 n個圓的所有排列中找出有最小長度的圓排列。例如,當 n 3,且所給的 3個圓的半徑分別為1,1,2時,這 3個圓的最小長度的圓排列如圖所示。其最小長度為 2 4 2 void c...