Question

我正在尝试设置网站标题/导航栏。在左侧我有一个徽标区域，右侧是几个按钮/链接，在中间，我有一个填充空的空间，所以徽标被推到左边，链接被推到右边。

基本上我拥有inline-block元素的所有内容，位于拥有text-align: center的父级内部。这样，它们以屏幕为中心，但仍然向左和向右扩展。此外，所有内容都在div内，是屏幕整个宽度的90%，因此两侧有一些额外的空间。

Here's a fiddle to demo what I have

问题是，当窗户非常大时，徽标离左边不够远，而且链接远远不够（我希望它们基本上就在远处90％宽度居中父母的边缘）。但是，当窗口变小时，它就完美了（特别是在我的媒体查询生效之前）。

我在中间使用50％的宽度作为填充空间，但是当窗口变大时我需要更大的空间（可能像80%填充空间），有没有办法让width %对于空白区域变大，因为窗口仅使用css调整大小（并且每100个像素大小差异没有20个媒体查询）？

如果徽标和链接设置了width属性，我可以使用calc()，但他们不会，并且我想避免设置静态宽度

另外，我不想使用花车!!!

Answer 1

我觉得你正在寻找显示：table / table-cell而不是inline-block

JSfiddle Demo

#bar {
  font-family: arial;
  background: #eee;
}
.space {
  width: 50%;
  background: blue;
  height: 3px;
}
.text-padding {
  padding: 10px 0;
}
.text-align-center {
  text-align: center;
}
li {
  display: inline-block;
}
.centered {
  width: 90%;
  margin: 0 auto;
  background: tomato;
  display: table;
}
.centered div {
  display: table-cell;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 330px) {
  .logo-text {
    display: block;
  }
  .navigation {
    display: block;
  }
  .li {
    display: block;
  }
  .space {
    display: none;
  }
}

<div id='bar'>
  <div class='centered text-align-center'>
    <div class='text-padding logo-text'>
      Logo
    </div>
    <div class='space'></div>
    <div class='navigation'>
      <ul>
        <li class='li text-padding'>
          one
        </li>
        <li class='li text-padding'>
          two
        </li>
        <li class='li text-padding'>
          three
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

*编辑提供没有花车的解决方案*

当屏幕宽度允许时，您可以添加另一个媒体查询来调整间隔尺寸：

@media (min-width: 800px) {
  .space {
    width: 70%;
  }  
}

https://jsfiddle.net/u93wwLvv/8/

添加任意数量的媒体查询。

Answer 3

有几种方法可以做到这一点。 float，display: table / table-cell，当然还有flex。

Flex是新的，但很可能是未来，它的当前版本比以前版本更标准。

查看使用FlexyBoxes工具创建的正在运行的演示：

Running demo

基本上只创建了弹性设置，white-space: nowrap上的<ul>和媒体查询中的flex-container{ display: inline-block; }表示低分辨率。

同时查看this可能有趣的答案。

用css计算内联块元素的空间

3 个答案:

Running demo