Tocas: Centered Menu 和 right menu 同時使用

[t510599]

被推到左邊去了

[YamiOdymel]

你期望看到的效果是哪種呢？全部置中嗎？

[t510599]

大概這樣

[t510599]

順道一提 這條線也很怪

[YamiOdymel]

@t510599 那條線是 CSS 先天性的限制，沒辦法自動在最結尾省去。

倘若省去，也會在選單縮減的時候跟右邊的項目黏在一起而沒有分隔線。

[goodjack]

右邊不能省的話 如果左邊多一條呢？

[t510599]

.ts.centered.menu > .item:last-of-type { border-right:none; }
.ts.centered.menu .right.menu { border-left:1px solid rgb(233,233,233); }
試試(?
preview:

[YamiOdymel]

@t510599 如果你的 <a class="item"> 改為 <div class="item"> 那條線會照常出現。

[t510599]

可是menu正常使用下不會有這種情況吧🤔

[YamiOdymel]

已經以你提供的方式將 .right.menu 以 display: absolute 修正（雖然這麼修有點治標不治本）。

至於邊線則沒有異動，因為 last-of-type 不可靠。有可能會在 div 跟 a 混搭的時候觸發導致在非最後面的元素右邊線消失。

[t510599]

關於邊線的部分 依 @goodjack 的建議在左邊加上線 看起來比較不會有不對稱的感覺

[YamiOdymel]

左邊加上線確實比較不會有「不對稱」的感覺，但是這樣就變成會跟 Menu 左外框線相衝，視窗寬度縮小的話左邊就會像是 2px 框線那樣⋯

或者也可以限定只在 .centered.menu 的時候這麼做，然後祈禱使用者不會把視窗縮小⋯🤔

[t510599]

還有 position:absolute 只是暫時在不考慮適應性的情況下所加的設定
如果太窄的話會很悲劇 就像這樣 擠成一坨：

[YamiOdymel]

對，基本上就只能推薦不要在使用 .centered.menu 的時候用上 .right.menu。