Question

我正在尝试为我的第一个网站构建菜单栏。在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的情况下完成吗？

Answer 1

您可以将min-width添加到<body>代码并设置所需的宽度尺寸。每当您尝试缩小页面大小时，它都可以帮助您保持页面大小。

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

修改：尝试将.logo的{{1}}更改为position。

Answer 2

只需从徽标和shopbtn中删除position fixed，然后添加float left，如下所示，

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

现在相应调整您的填充和边距。

Answer 3

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

更新：将.logo的位置更改为relative。也许这就是你要找的那个。

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

3 个答案: