Question

我愿意编写代码让我的列表项（li）在中心对齐，并且当我放大或缩小时它们的距离会改变（因此它们将始终保持在页面的中间）但是当我放大或缩小，他们保持距离并流出页面这是我的lis代码：

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

这是我的ul与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>

我不知道我是否需要js或其他东西（如果你知道js中的代码，请告诉我） TNX

Answer 1

不使用media queries：

你想要做THIS DEMO吗？

Answer 2

他们称之为响应式设计可能会帮助你;）

它会因为每个屏幕上的屏幕宽度不同而发生变化+如果缩小浏览器窗口，它也会发生变化。

解决方案是这样做的：

你可以通过在你的CSS中使用@media查询和一个视口来解决这个问题，并将这个元标记添加到你的html：

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

使用@media查询和视口，您可以使用css中的媒体查询+视口声明每个屏幕宽度的大小：

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

//宽度为820到920像素的屏幕的css到这里

我主要使用的值是：从20 - 600,600-700,700-820,820 - 920,920 - 1200，@ media screen和（min-width：1200px）{@ viewport {width：1200px; }（最后一个将设置任何大于1200像素宽度的屏幕的大小，所以你的代码最大的版本在这里进行}

因此，这意味着您的css代码将被调整为适应大小的6倍。

这称为自适应或响应式设计，非常容易实现

有关详细信息，请查看此http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

放大或缩小时对齐列表项

2 个答案: