把鏈接放在彼此相鄰 - CSS手機風格

我有我的鏈接垂直堆疊在我的默認CSS，但我試圖將導航推到頁面的頂部，並在手機中水平設置它們。似乎無法實現。該網站是在WordPress中，這使得確定元素的名稱困難。把鏈接放在彼此相鄰 - CSS手機風格

#sidebaar a, #sidebaar li { 
text-align:right; 
clear:both;

}

#sidebaar{ 
width:150px; 
text-align, right; 
align-content:right; 
display:inline-block; 
width:100%;

}

在媒體樣式：

#sidebaar a, #sidebaar ul li, #sidebaar ul li a{ 
display:inline; 
clear:none; 

} #sidebaar{ 
    width:100%; 
}

我的網站在這裏可以查看 - http://www.ubart320.org/students/mariaroo/gallery/

來源

2017-04-18 maria

你header和nav元素包含（在不同規則中）width和max-width定義的最大寬度爲150px，寬度爲160/360px，這可以防止菜單變得更寬。

你必須定義兩個width: 100%;和max-width: none;，必要時加!important to those values

來源

2017-04-19 00:01:53 Johannes

你有一些時髦的代碼怎麼回事。出於某種原因，您在手機上顯示兩個菜單。不過，我設置第二個菜單display: none;和應用這些樣式來獲得可以接受的結果（適用這個給你手機樣式）：

nav{ 
    width: 100%; 
    max-width: none; 
} 
ul#menu-menu-2{ 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    flex-wrap: wrap; 
} 
#menu-menu-2 li{ 
    margin: 0 2.5px; 
}

請參見下面的最終結果。看起來你在照片網格上還有一些工作要做，但橫向導航是可以接受的。如果您還有其他問題，請告訴我！那些評論。

來源

2017-04-19 00:23:48 Kellen

哈，那些評論。您是否在「sidebaar」元素中設置了展示：沒有？感謝您的幫助 – maria

@maria不，我將#sidebar設置爲'display：none;'。我不確定爲什麼WordPress會在手機上重複您的主菜單。您可能可以在配置中修復它，而不是使用'display：none'。希望這可以幫助！ – Kellen

把鏈接放在彼此相鄰 - CSS手機風格

回答

相關問題