使用相對定位對齊導航標誌

我的CSS定位技巧一直非常糟糕。我正在尋找將我的導航欄放置在我的徽標旁邊，並使其隨頁面一起移動，而不是在1080p屏幕上最大化窗口以外的任何地方都能看到。使用相對定位對齊導航標誌

什麼它目前看起來像：http://5.9.78.201/abellant/

它可能會看起來很奇怪，如果你在不同的屏幕尺寸。

我已經（迄今爲止）使用了在這裏找到的方法，無濟於事，在放棄它之前使用相對，絕對，甚至清理。

任何人都可以告訴我，我搞砸了嗎？我對所有事情都很尷尬，我的定位如此糟糕。

謝謝。

2016-03-05 OpFor

你有你的元素靜態定位（即'保證金右：515px;'），這將永遠是絕對的，並期待不同的屏幕上奇尺寸大於一個其他你設計了它（'margin-right：515px;'，將破壞小型iPhone顯示器的佈局）。您需要使用相對度量單位（如'％'而不是'px'）來相對定位元素。這可能是一項艱鉅的任務，這就是爲什麼有響應的CSS框架，如Bootstrap – zgood

@zgood是的，我喜歡Bootstrap這種事情，但我這次不使用它的理由是，我想開始做一些兼職開發工作，這樣，我真的需要停止依靠Boostrap或其他框架來節省我的定位，這是我唯一無法理解的概念。必須在某個點或另一個點上學習它，可能應該現在就做。 – OpFor

如果您想「手動」，請參閱我發佈的Google響應式設計教程 - https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/？hl = en –

我解決了你的問題。

.container { 
    min-width: 500px; 
    position: relative; 
    text-align: center; 
} 

#logo { 
    display: inline-block; 
    vertical-align: middle; 
} 

#navigation { 
    display: inline-block; 
}

如果您發現該標誌和菜單是不完全中心，那是因爲你的形象有一個白色的小空間，如果你能刪除空間並更換新的圖像將被完美中心:)

來源

2016-03-05 04:10:02

如果要將徽標和導航欄放在頁面的中心位置，請執行以下操作:: 設置#header「display：inline-block」，「height：auto」和「text-align：center;」並刪除所有已添加到#logo CSS和#navigation

#header { 
width: 100%; 
height: auto; 
background: #f2f2f2; 
margin: 0; 
padding: 0; 
box-shadow: 0 1.5px 1px #777; 
display: inline-block; 
text-align: center; 
}

如果你想通過側::設置您的徽標和導航側

#header { 
width: 100%; 
height: auto; 
background: #f2f2f2; 
margin: 0; 
padding: 0; 
box-shadow: 0 1.5px 1px #777; 
display: inline-block; 
} 

#logo { 
float: left; 
width: 50%; 
} 

#navigation { 
float: right; 
margin: 40px; 
}

如果你想將你的頭部分與頁面滾動。將#header設置爲「position：fixed」。

來源

2016-03-05 04:10:18 WisdmLabs

我一直在尋找標題，以便在調整頁面大小時不會弄亂所有頁面，而不是滾動頁面。我曾在某一點，但它不是我正在尋找的確切效果（底部）。他們彼此相鄰，但距離較遠。另一位用戶將這些內容鏈接到了一些教程中，所以我對這些內容感興趣。不過謝謝你。 – OpFor

所以問題的一部分是你有一個固定的左右邊距。拆下固定左右邊距爲#logo和#navigation和做一些像在你的CSS如下：

#header { 
    margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */ 
    width: 960px; /* You need a width that will accomodate the logo and nav */ 
}

要在其它尺寸這項工作，你需要尋找到CSS3斷點。這裏是一個教程：

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en

來源

2016-03-05 04:10:59

P.S.如果您閱讀響應式設計教程，它將指示您使用相對單位而不是使用margin auto的固定寬度。對此的正確迴應是根據教程提供的建議 - 我的代碼只能解決您眼前的問題。 –

使用相對定位對齊導航標誌

回答

相關問題