放大或缩小时对齐列表项

Question

i'm willing to write a code to have my list items(li)aligned in center and have their distance change when i zoom in or out(so they will always stay in the middle of the page) but when i zoom in or zoom out, they keep their distances and flow out of the page here is my code for lis:

#inlinelist
{
    display:inline;
    padding:1px;
    border:solid 1px;
    margin-left:15%;
}
</style>

and here is my ul with lis:

<div>
<ul style="list-style-type:none;
position:inherit;
width:100%;">
<li id="inlinelist">ggl</li>
<li id="inlinelist">ggl</li>
<li id="inlinelist">ggl</li>
<li id="inlinelist">ggl</li>
</ul>
</div>

i don't know if i need js or something(if you know the code in js,please tell me) tnx

Answer 1

Not using media queries :

Is THIS DEMO is what are you trying to do?

Answer 2

There is something they call responsive design it might help you out ;)

it changes because of the fact that screen width isn't the same on every screen + if you scale down the browser window it also changes.

the solution is doing this:

you can fix this by using @media query's and a viewport in your css , and add this meta tag to your html:

 <meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>

and with the @media query's and viewport you declare what size you have per screen width using this media query + viewport in css:

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }   

// your css for screens between 820 and 920 pixels in width goes here

  }

i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, @media screen and (min-width: 1200px){ @viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}

So this means you will have 6 times your css code which is adapted will be adapted to the size.

This is called adaptive or responsive design and is pretty easy to do

For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/