Question

我创建了我的第一个博客，但没有响应。任何人都可以帮助我成为这个小菜单响应？有了我的电脑，我看到很糟糕，而且其他电脑也不好，如果我放大/重新缩放它就是一场灾难。对于打印机来说很糟糕：D

这里的小提琴：

＆＃13;

main {
  margin: 1px;
}
aside.left {
  background-color: #eee;
  height: 10%;
  width: 15%;
  padding: 2.5%;
  display: block;
  border: 1px solid #000;
}
aside.left > p {
  color: #444;
  text-align: center;
  display: inline-block;
}
aside.left > nav > ul {
  list-style: none;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
}
aside.left > nav > ul > li {
  display: block;
  margin-top: 20px;
  position: relative;
  bottom: 20%;
}
aside.left > nav > ul > li > a {
  text-decoration: none;
  color: #fff;
  background-color: #444;
  padding: 10%;
  transition: all 1s ease;
}
aside.left > nav > ul > li > a:hover {
  color: #444;
  background-color: #fff;
}
aside.left > p > img {
  border-radius: 100%;
  width: 100px;
  border: 3px solid #444;
}
aside.right {
  width: 500px;
  position: relative;
  left: 170px;
  background-color: #eee;
  border: 1px solid #000;
  line-height: 100px;
  bottom: 310px;
}

＆＃13;

<main>
  <aside class="left">
    <p>Mattew
      <img src="http://avatarfiles.alphacoders.com/456/45610.png" alt="avatar">
    </p>
    <nav>
      <ul>
        <li><a href="1#2">Home</a>
        </li>
        <li><a href="2#2">About</a>
        </li>
        <li><a href="3#2">Contact</a>
        </li>
      </ul>
    </nav>
  </aside>
  <aside class="right">
    <article>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nam a non numquam, architecto doloribus nulla voluptatum vel possimus facilis odio laudantium quod aut dolorum, obcaecati cupiditate explicabo. Eum, magnam!
    </article>
  </aside>
</main>

＆＃13;

Answer 1

您需要将min-width添加到菜单容器中，添加left: 0;也会有助于将菜单粘贴在左侧，但这取决于您。

试试这个：

aside.left {
  background-color: #eee;
  height: 10%;
  width: 15%;
  min-width: 100px;
  padding: 2.5%;
  left: 0;
  display: block;
  border: 1px solid #000;
}

以下是 Fiddle

如何让菜单响应？

1 个答案: