前端問題(一)關於css控制導航欄浮動問題

2021-10-19 20:00:23 字數 2872 閱讀 6195

最近在看前端的css部分,嘗試寫出乙個頁面的頭部,我用ul做的選單欄,然後float向左沒有問題,因為右邊空出來,也不用,但是嘗試向右浮動,就出現問題了。

圖:

雖然可以向右,但是我寫的li都反了,html**:

class

="top-menu"

>

>

你好,請

href

="#"

>

登入a>

li>

class

="spilt"

>

|li>

>

href

="#"

>

免費註冊a

>

li>

class

="spilt"

>

|li>

>

href

="#"

>

我的訂單a

>

li>

class

="spilt"

>

|li>

>

href

="#"

>

我的京東a

>

li>

class

="spilt"

>

|li>

>

href

="#"

>

京東會員a

>

li>

class

="spilt"

>

|li>

>

href

="#"

>

企業採購a

>

li>

ul>

所以我就想,換成向左浮動:

但是我是想讓黃色部分右對齊,我就想要不加乙個div,填補下,但是右邊確實不好對齊,你要自己算寬度,對了,灰色的頂部上有乙個長度為1200px的div,我的紅色和黃色的部分都是在這個div裡面,我最後試到337.5px,不放大看著好像對齊了。

圖:

還嘗試使用了margin-right:0px;padding-right=0;沒用。要計算剩餘值挺麻煩的,畢竟li的選單內容也可能會變,你總不能再去改吧?

css**(部分):

.top-menu

.top-menu li

/*這個是用來佔空間的div類選擇器*/

.empty

html**(部分):

""class

="top"

>

""class

="w1200"

>

class

="loc"

>

安徽p>

""class

="empty"

>

測試div

>

class

="top-menu"

>

>

你好,請

href

="#"

>

登入a>

li>

class

="spilt"

>

|li>

>

href

="#"

>

免費註冊a

>

li>

class

="spilt"

>

|li>

>

href

="#"

>

我的訂單a

>

li>

class

="spilt"

>

|li>

>

href

="#"

>

我的京東a

>

li>

class

="spilt"

>

|li>

>

href

="#"

>

京東會員a

>

li>

class

="spilt"

>

|li>

>

href

="#"

>

企業採購a

>

li>

ul>

div>

div>

所以我覺得真實開發不會這麼做的,太麻煩了吧。我就在想怎麼弄,後來查了下資料,我發現我犯傻了。

解決:先將ul設為右浮動,裡面的li設定左浮動。

效果:

css**:

.top-menu

.top-menu li

注意上面的float值。

html部分刪除測試所在div即可。

我怎麼就沒有想到呢。太教條了,我得學會變通,表示太好玩了,自己有必要記錄下。

參考好,就到這,下次見。

sue2023年2月22日22:38:16

influxdb 一 關於時間的問題

一 influxdb預設的時間字段 在influxdb中缺省會有兩個欄位time,並且只能用utc形式儲存 二 influxdb中時間格式 influxdb支援三種時間格式,epoch time外,還支援rfc3339 date time string和rfc3339 like date time ...

一 關於網路傳輸中的加密和加簽的問題

開發中經常會存在不同系統之間的資料共享,那麼通過介面方式傳輸資料就是一件很方便的方式了。現在還有很多公司是用的http傳輸的資料,那麼資料是不安全的存在著資料在傳輸過程中發生洩漏的風險,所以現在資料傳輸常用的就是加密和加簽的方式來保證資料的安全。加密和加籤中用到了非對稱性加密 rsa 而非對稱性加密...

關於前端css的一些心得體會

1.css選擇符的權重規則 class的權重是10,id的權重是100 如果css選擇符權重相同,那麼樣式會遵循就近原則,那個選擇符最後低昂一,就採用那個選擇符的樣式 2.使用子代選擇器,會增加css選擇符的權重,css選擇符的權重越高,樣式越不容易被覆蓋,越容易對其他選擇符產生影響 3.是否使用雪...