以响应为中心的菜单，而菜单按钮也需要重新调整大小https://jsbin.com/fafeya/1/

问题描述 投票：0回答：2

我正在尝试使页面具有响应性。用两个简单的div作为徽标，效果很好。徽标也会调整大小。对于我要创建的菜单，只有这是一个列表，我发现很难将按钮居中。我走了这么远，但并没有我想要的居中对齐。仅当最小屏幕尺寸时。

@charset"UTF-8";

/* CSS Document */

/*Algemeen*/

#wrapper {
  width: 100%;
  height: 100%;
  margin: 0px auto;
}
header {
  padding-bottom: 8%;
  width: 100%;
  height: auto;
  background-color: #88d9ce;
}
#logo {
  text-align: center;
  padding-top: 10px;
}
#logo img {
  min-width: 100px;
  max-width: 15%;
  height: auto;
}
#menu {
  text-align: center;
  margin-left: -25px;
  width: 100%;
}
ul {
  list-style-type: none;
}
li {
  float: left;
  width: 17%;
  height: auto;
  margin-right: 3%;
}
li img {
  min-width: 60px;
  max-width: 50%;
  height: auto;
}
<body>
  <div id="wrapper">
    <header>
      <div id="logo">
        <img src="http://i61.tinypic.com/13yebnr.jpg" />
      </div>
      <div id="menu">
        <ul>
          <li>
            <img src="http://i60.tinypic.com/5f0pd4.png" />
          </li>
          <li>
            <img src="http://i59.tinypic.com/2cx6xqs.png" />
          </li>
          <li>
            <img src="http://i58.tinypic.com/veu6o1.png" />
          </li>
          <li>
            <img src="http://i61.tinypic.com/24ebywg.png" />
          </li>
          <li>
            <img src="http://i62.tinypic.com/71r8ut.png" />
          </li>
        </ul>
      </div>
    </header>
  </div>
</body>
css responsive-design menu center
2个回答
0
投票

您可以将display:inline-block用作li，然后以text-align:center为中心。 font-size:0px上的ul是为了消除多余的间距。如果该列表项中有文本，请在其上放上字体大小。

DEMO：https://jsbin.com/xudaz/1/

   <div id="logo">
      <img src="http://placehold.it/300x100/000000/FFFFFF&text=LOGO" />
    </div>

    <ul id="menu">
       <li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=1"/></li>
       <li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=2"/></li>
       <li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=3"/></li>
       <li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=4"/></li>
       <li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=5"/></li>
    </ul>

CSS：

#logo {
    text-align:center;
    padding-top:10px;
}
#logo img {
    min-width:100px;
    max-width:15%;
    height:auto;
}

#menu {
    list-style-type:none;
    padding:0;
    font-size:0px;
    white-space:nowrap;
    min-width:240px;
    text-align:center;
    width:100%;
    max-width:980px;
    margin:0 auto;
}
#menu li {
    display:inline-block;
    box-sizing:border-box;
    border:1px solid red;
    width:17%;
}
#menu li img {
    height:auto;
    width:100%;
    max-width:60px;
}
0
投票

这里是一个备用“答案”，因为它根本不使用图像。您会发现，用于导航的图像，除非尺寸是其两倍，否则在高密度（视网膜）设备上看起来会模糊。同样，在小视口上缩小链接的大小太难了，因为手指有点肥。这样可以更好地堆叠。

DEMO：https://jsbin.com/fafeya/1/

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9MSkEzaC5wbmcifQ==” alt =“在此处输入图像描述”>

CSS

body,
html {
    background: #88d9ce;
    padding: 0;
    margin: 0;
}
.logo {
    width: 100px;
    height: 100px;
    background: yellow;
    margin: 3% auto;
    border-radius: 50%;
    box-sizing:border-box;
    border:5px solid #000;
}
#nav {
    text-align: center
}
#nav a {
    background: #9cf2e6;
    display: inline-block;
    color: #000;
    text-decoration: none;
    font-size:14px;
    font-family:monospace; /* see google fonts too or typekit etc */
    padding: 5px 20px 3px;
    box-shadow: 4px 4px 0px 0px rgba(50, 50, 50, 0.5);
    transform: rotate(2deg) skew(2deg);
    margin: 5px 3%;
}
#nav a span {
    transform: rotate(-2deg) skew(-2deg);
    display: block;
}
#nav a:nth-child(even) {
    transform: rotate(-2deg) skew(-2deg)
}
#nav a:nth-child(even) span {
    transform: rotate(2deg) skew(2deg)
}

HTML：

<div class="logo"></div>


<nav id="nav">
  <a href="#"><span>Link</span></a>
  <a href="#"><span>Link</span></a>
  <a href="#"><span>Link</span></a>
  <a href="#"><span>Link</span></a>
  <a href="#"><span>Link</span></a>
</nav>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.