Question

我正在尝试为我的网站编写响应式标头。理想情况下，在大屏幕上，徽标应位于左侧，而内联菜单则由三项组成。当您在小屏幕上查看时，我希望徽标位于顶部居中，三个菜单项堆叠并居中。

我有两个问题。首先，我无法将嵌入式菜单与徽标对齐。我将徽标设置为margin：auto，但是当我将文本菜单设置为margin：auto时，它将自身推到页面的顶部。我手动调整了上边距，但注意到它是根据设备屏幕尺寸（duh）进行更改的，因此它始终未与徽标垂直对齐。我希望它在所有屏幕尺寸下都与徽标垂直对齐。

第二个问题是，当我在小屏幕上查看它时，文本菜单堆叠在徽标下方，但是它没有居中，我也不知道为什么。

堆叠菜单未居中的问题一直在发生，所以我从头开始，仍然遇到问题。

{
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    text-align: center;
    margin: auto;
  }
  }


ul {
     font-size: 14px;
     font-family: 'Literata', serif;
     letter-spacing: 2px;
     }

li {
      display: inline;
    }

<header>
<div class="row">
  <div class="column" style="background-color:transparent">
    <img src="imglink" style="max- 
     width:100%;height:auto;">
  </div>
  <div class="column" style="background-color:transparent;">
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#menu">MENU</a></li>
      <li><a href="#contact">CONTACT</a></li>
    </ul>
  </div>
</div>
</header>

Answer 1

我设法使它像这样工作。

<html>
<head>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <style>
        {
            box-sizing: border-box;
        }

        .column {
            float: left;
            width: 50%;
            background-color: transparent;
            flex: 1;
        }

        .column img {
            max-width: 100%;
            height: auto;
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        // makes side by side div's same height
        .row {
            display: flex;
        }

        // makes nav-div's content vertically centered
        #nav {
            display: flex;
            align-items: center;
        }

        ul {
            font-size: 14px;
            font-family: 'Literata', serif;
            letter-spacing: 2px;
            margin: 0;
            padding: 0;
        }

        li {
            display: inline;
        }

        @media screen and (min-width: 601px) {
            // for big screens, make links appear side by side
            li {
                float: left;
            }
        }

        @media screen and (max-width: 600px) {
            .column {
                width: 100%;
                text-align: center;
                margin: auto;
                float: none;
            }
            li {
                text-align: center; //centers links
                display: block; // makes links appear on top of each other, not side by side
            }
        }
    </style>
</head>
<body>

<header>
    <div class="row">
        <div class="column">
            <img src="imglink">
        </div>
        <div class="column" id="nav">
            <ul>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#menu">MENU</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </div>
    </div>
</header>

</body>
</html>
´´´

Answer 2

尝试显示 Flex 或使用前端组件库之一，例如引导程序

  li {
    list-style: none;
}
.header {
  display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: #ccc;
    padding: 8px;
}
img.image {
    width: 120px;
}
.menu ul {
  display: flex;
    padding: 0;
    justify-content: center;
}
.menu ul li{
    padding: 0 8px
}
.menu {
    max-width: 100%;
    flex: 0 0 100%;
    text-align: center;
}
@media screen and (max-width: 600px) {
  .header {
    flex-wrap: wrap;
}
  .logo {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
}
  }

<html>
<head>
</head>
<body>

<header>
<div class="header">
  <div class="column logo">
    <img class="image" src="imglinkg">
  </div>
  <div class="column menu">
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#menu">MENU</a></li>
      <li><a href="#contact">CONTACT</a></li>
    </ul>
  </div>
</div>
</header>

</body>
</html>

为简单的响应头编写代码

2 个答案: