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

Question

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!!!

Answer 1

I sense you are looking for display:table / table-cell rather than 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

* Edited to provide a solution without floats *

You could just add another media query to adjust the spacer size when the screen width allows:

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

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

Add as many media queries as you like.

Answer 3

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; } flex-container{ display: inline-block; } in the media query for low resolution.

Also check out this potentially interesting answer.