將導航欄與文本主體對齊

我正在嘗試將我的導航欄的最左側元素與其下方的文本主體對齊。我目前有，但它是一個「骯髒」的解決方案，並推動導航移動視圖。將導航欄與文本主體對齊

How it should look

以下是我希望它看起來。我現在這樣做的方法是如下：

#wrapper { 
    max-width: 1000px; 
    width: 100%; 
    margin: 0 auto; 
    padding: 50px; 
    overflow: hidden; 
} 

#main { 
    width: 100%; 
    margin: 0 auto; 
    float: left; 
} 

/* nav structure */ 

#header { 
    font-family: 'Montserrat', sans-serif; 
} 

#menu-nav { 
    padding: 15px 0px; 
    position: relative; 
    text-align: left; 
    left: 660px; 
} 

#menu-nav li { 
    display: inline-block; 
} 

#menu-nav li a { 
    padding: 15px 0px; 
    display: block; 
    width: 100px; 
}

正如你可以看到我使用的660px左值從而真正推動導航結束。有沒有辦法讓它在移動設備上看起來像這樣呢？下面是目前移動視圖：

Mobile View

如果您需要查看實際的站點：http://adamshort.site50.net

來源

2014-08-27 Adam Short

只是得到＃菜單NAV的寬度和經銷商的利潤，您已經做了#wrapper指定和#main – Moob 2014-08-27 21:46:30

嘗試使用此方法ul#menu-nav

#menu-nav { 
padding: 15px 0px; 
position: relative; 
text-align: left; 
max-width: 1000px; 
margin: 0 auto; 
}

來源

2014-08-27 21:54:44 Anonymous

偉大工程的感謝！ – 2014-08-27 21:55:57

我很高興我能幫助。 :) – Anonymous 2014-08-27 21:58:32

嘗試這種解決方案：

.menu-nav-container { 
    text-align: center; 
} 

#menu-nav { 
    padding: 15px 0px; 
    text-align: left; 
}

來源

2014-08-27 21:46:35 luke

只需將導航切換到屏幕的最左邊即可。 – 2014-08-27 21:53:54

幫助你會更容易如果您的HTML代碼也是提供的，不幸的是我無法加載您的網站。

但是，我建議將#wrapper更改爲類，然後可以使用與應用於內容相同的包裝器來包裝導航內容。這樣他們都會尊重相同的（響應）左邊距。然後，簡單地左對齊導航列表就會導致它從與其下面的內容相同的點開始。

你接近它的方式不響應，只適用於具有一定寬度的頁面，您明確告訴導航從頁面的左側坐着660px始終。同時你的內容包裝有一個保證金：0 auto這會導致頁面左側的頁邊距根據瀏覽器窗口的大小動態變化。

來源

2014-08-27 21:54:48 Brian

假設其內#wrapper指定你可以給它一個寬度和中心像你已經#main：

#menu-nav { 
padding: 0px; 
position: relative; 
margin: 0 auto; 
display: block; 
width: 100%; 
}

來源

2014-08-27 21:58:02 Moob

將導航欄與文本主體對齊

回答

相關問題