如何调整窗口大小时正确对齐菜单项？

我想为我的第一个网站建立菜单栏。正确显示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

你想要的输出是什么？我把一个“标志”标签，看看它是否显示。 –

如何调整窗口大小时正确对齐菜单项？

回答

相关问题