使用css计算内联块元素的空间(calculate space for inline

使用css计算内联块元素的空间(calculate space for inline-block elements with css)

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

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

这是演示我所拥有的东西的小提琴

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

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

如果徽标和链接设置了width属性，我可以使用calc()但它们没有，我想避免设置静态宽度

另外，我不想使用花车！

I'm trying to set up a website header/navigation bar. On the left side I have a logo area, on the right side are a few buttons/links, and in the middle, I have a filler empty space so the logo gets pushed to the left, and the links get pushed to the right.

Basically I have everything as inline-block elements, inside a parent who has text-align: center. This way they are centered on the screen, but still expand to the left and right. Also, everything is inside of a div that is 90% of the full width of the screen, so there is some extra space on the sides.

Here's a fiddle to demo what I have

The problem is, when the window is really big, the logo isn't far enough to the left and the links aren't far enough to the right (I want them to basically be right on the far edges of the 90% width centered parent). However, when the window gets small, its perfect (especially before my media query comes into effect).

I've used 50% width as the filler space in the middle, but I need a larger space when the window gets bigger (maybe like 80% filler space), is there a way to make the width % for the empty space get bigger as the window resizes with just css (and without like 20 media queries for every 100 pixels size difference)?

If the logo and links had set width properties, I can use calc() but they don't, and I'd like to avoid settings static widths

Also, I don't want to use floats!!!

最满意答案

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

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

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

运行演示

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

另请参阅这个可能有趣的答案。

There are several ways to do that. float, display: table / table-cell, and certainly flex.

Flex is new, but is most likely the future, and its current version is a lot more standard than the previous ones.

Check out the running demo created with the FlexyBoxes tool:

Running demo

Created with basically only the flex settings, the white-space: nowrap on the <ul> and the flex-container{ display: inline-block; } in the media query for low resolution.

Also check out this potentially interesting answer.