Question

所以，基本上我有一个包含徽标和菜单的标题。通常我会使用flex来布局它们，但我希望对旧版浏览器进行回退，因此我尝试将它们与inline-block对齐。我没有使用float，因为我希望菜单在中间垂直对齐。问题是当浏览器窗口越来越窄时，图像不会变小。相反，菜单被推出视口，我不知道为什么以及如何更改它。

以下是代码：https://jsfiddle.net/gwmfqg7t/1/

CSS

.header-wrapper {
  width: 100%;
  border: 1px dashed red;
  white-space: nowrap;
}

.header-wrapper:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.logo {
  display: inline-block;
  vertical-align: middle;
  border: 1px dashed olive;
  margin: 10px 0;
}

nav.menu-wrapper {
  display: inline-block;
  vertical-align: middle;
  border: 1px dashed blue;
  padding: 2px;
}

ul.menu {
  display: block;
  list-style-type: none;
  border: 1px dashed green;
  padding: 2px;
}

ul.menu li {
  display: inline-block;
  border: 1px dashed brown;
  margin: 2px 10px 2px;
}

HTML

<div class="header-wrapper">
 <div class="logo">
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/10/Wikipedia_banner_2.png">
 </div>
 <nav class="menu-wrapper">
  <ul class="menu">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
  </ul>
 </nav>
</div>

Answer 1

您需要为.logo和.logo img元素提供灵活的宽度。像：

.logo {
  display: inline-block;
  vertical-align: middle;
  border: 1px dashed olive;
  margin: 10px 0;
  width: 25%;
}

.logo img {
  width:100%;
}

为了提高响应速度，您可以添加以下媒体查询：

@media screen and (max-width: 500px) {
  ul.menu li {
  display: block;
  width:100%;
  }
  .logo {
    display: block;
    width:100%;
    }
}

Try and resize the fiddle

Answer 2

MarioZ＆＃39;解决方案有效。我想出了一个不需要为徽标设置宽度的徽标，只要您允许稍微更改一下要求以允许display: table。从IE8开始支持表，其他浏览器共享相同的内联块支持矩阵。

.header-wrapper {
   width: auto; /* instead of 100%, see comments */
   display: table;
}

.logo, .menu-wrapper {
   display: table-cell;
}

.logo img {
   max-width: 100%;
}

Updated JSFiddle

自动调整inline-block-div的大小

2 个答案: