如何調整窗口大小時正確對齊菜單項？

我想爲我的第一個網站建立菜單欄。正確顯示1280x800菜單的窗口分辨率。但是，縮小菜單時，菜單開始對齊不正確。如何調整窗口大小時正確對齊菜單項？

HTML：

{% load staticfiles %} 

<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}"/> 

<div class="menu"> 
    <a href="/" class="logo"></a> 
    <a href="/shop" class="shopbtn" style="text-decoration:none">Buy Cherry</a> 
</div>

CSS：

body { 
    background-color: lightgrey; 
} 


.menu { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    background-color: white; 
    min-height: 10%; 
    min-width: 150%; 
} 


.logo { 
    position: fixed; 
    top: 0%; 
    left: 0%; 
    right: 0%; 
    background-image: url('http://i.imgur.com/kMdEoP6.png'); 
    width: 250px; 
    height: 55px; 

    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
} 

.logo:hover { 
    background-image: url('http://i.imgur.com/7d2V63b.png'); 
    width: 249px; 
    height: 55px; 
} 

.shopbtn { 
    position: fixed; 
    font-size: 12pt; 
    right: 10%; 
    left: 23%; 
    top: 5%; 
    white-space: nowrap; 
    color: black; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    float: right; 
} 

.shopbtn:hover { 
    color: darkred;

我已經嘗試了所有的元素加入margin-left和margin-right與汽車的聲明，但菜單會陷入困境，仍然會錯誤地調整大小時去。

什麼是在縮放時保持導航器正確的解決方案？有沒有可以解決問題的佈局？這可以在不使用Javascript的情況下完成嗎？

來源

2016-06-25 ShellRox

添加您的完整代碼，因爲在這裏只有購買櫻花鏈接是可見的，看不到您的標誌。創建一個jsfiddle會對你非常有用。 – frnt

只是刪除從兩個標誌和shopbtn position fixed和下面添加float left，

.logo { 
    float:left; 
} 
.shopbtn { 
    background:#666666; 
    float:left; 
    margin:20px; 
}

現在，相應地調整你的填充和保證金。

來源

2016-06-25 10:36:44 frnt

非常感謝！由於它不在固定位置，即使向下滾動，它仍會跟着窗口嗎？ – ShellRox

歡迎@ShellRox :-)，它得到了滾動，因爲位置不固定。 – frnt

有什麼辦法可以跟着滾動嗎？這兩個元素都是固定的div佈局。 – ShellRox

您可以將min-width添加到<body>標籤並設置所需的寬度尺寸。當您嘗試縮小頁面大小時，它可以幫助保持頁面大小。

body { 
 
    background-color: lightgrey; 
 
    min-width: 800px; 
 
}

編輯：試着改變你的.logo的position到relative。

來源

2016-06-25 10:15:29

謝謝，但它沒有解決問題，我仍然可以縮小菜單，它仍然會搞砸。 – ShellRox

我沒有注意到'menu'。當您縮小窗口時，它將停留在您放置「菜單」的旁邊或任何位置。嘗試將「位置」更改爲「相對」。只是玩弄價值觀。 –

試圖這樣做時它消失... – ShellRox

body { 
 
    background-color: lightgrey; 
 
} 
 
.menu { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: white; 
 
    min-height: 10%; 
 
    min-width: 150%; 
 
} 
 
.logo { 
 
    position: relative; 
 
    top: 0%; 
 
    left: 0%; 
 
    right: 0%; 
 
    background-image: url('images/logo.png'); 
 
    width: 250px; 
 
    height: 55px; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
.logo:hover { 
 
    background-image: url('images/logohover.png'); 
 
    width: 249px; 
 
    height: 55px; 
 
}

<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}" /> 
 

 
<div class="menu"> 
 
    <a href="/" class="logo">Logo</a> 
 
    <a href="/shop" class="shopbtn" style="text-decoration:none">Buy Cherry</a> 
 
</div>

更新：更改.logo的位置relative。也許這是你正在尋找的那個。

來源

2016-06-25 10:29:21

我只能看到徽標標籤和一小塊背景圖像以適應文本，我無法設置寬度/高度手動相對位置。 – ShellRox

你想要的輸出是什麼？我把一個「標誌」標籤，看看它是否顯示。 –

如何調整窗口大小時正確對齊菜單項？

回答

相關問題