限制 div 宽度和中心

Question

我正在写标签云。当显示在 phone 上时，它会显示完整的宽度并且看起来不错。但是在桌面上，它也显示全宽并且看起来不像我想要的那样。我想将桌面上 div 的宽度限制为总宽度的一部分，比如 60%。但是正如你在我的 jsfiddle 中看到的那样，当显示加宽时，文本会变成一长行。我已经尝试应用我在这里找到的各种建议，例如最大宽度，但 none 似乎有所作为。有人可以指出如何做到这一点吗？这是我的代码：

    <style>
    #container {
     width:100%;
     text-align:center;
    } 
    .cloud {
     display:inline;
     list-style-type:none;
     max-width:50%;
     width:100%;
    }
    .cloud li {
     list-style: none;
     display: inline; 
    }
    #tagcloud .smallest { font-size:.8em; font-weight:400; }
    #tagcloud .small { font-size:.9em; font-weight:500; }
    #tagcloud .medium { font-size:1em; font-weight:600; }
    #tagcloud .large { font-size:1.3em; font-weight:700; }
    #tagcloud .largest { font-size:1.6em; font-weight:800; }
    </style>


    <div id="container">
      <ul class="cloud" id="tagcloud">
        <li class="small">performance testing</li>
        <li class="largest">stress testing</li>
        <li class="large">conformance testing</li>
        <li class="medium">acceptane testing</li>
        <li class="small">smoke testing</li>
        <li class="smallest">smoke testing</li>
        <li class="small">performance testing</li>
        <li class="largest">stress testing</li>
        <li class="large">conformance testing</li>
        <li class="medium">acceptane testing</li>
        <li class="small">smoke testing</li>
        <li class="smallest">smoke testing</li>      
      </ul>      
    </div>

Answer 1

您必须使用媒体查询来控制特定屏幕尺寸的宽度。注意我用了4个媒体查询，是各种屏幕尺寸的常用断点（常用Bootstrap4）；对于最小的屏幕尺寸（<576px 宽度），CSS 样式设置在媒体查询之外。

另请注意，我已将 container 的 display 从 inline 更改为 inline-block，以赋予元素宽度属性。

#container {
  width: 100%;
  text-align: center;
}

.cloud {
  display: inline-block;
  list-style-type: none;
  width: 90%;
}

.cloud li {
  list-style: none;
  display: inline;
}

#tagcloud .smallest {
  font-size: .8em;
  font-weight: 400;
}

#tagcloud .small {
  font-size: .9em;
  font-weight: 500;
}

#tagcloud .medium {
  font-size: 1em;
  font-weight: 600;
}

#tagcloud .large {
  font-size: 1.3em;
  font-weight: 700;
}

#tagcloud .largest {
  font-size: 1.6em;
  font-weight: 800;
}

/* ---------------------------------------------
    Media Queries
--------------------------------------------- */
/* SM Small devices */
@media(min-width: 576px) {
  .cloud {
    width: 80%;
    margin: auto;
  }
}

/* MD Tablets */
@media (min-width: 768px) {
  .cloud {
    width: 70%;
    margin: auto;
  }
}

/* LG Desktop */
@media (min-width: 992px) {
  .cloud {
    width: 60%;
    margin: auto;
  }
}

/* XL Modern desktop */
@media (min-width: 1200px) {
  .cloud {
    width: 50%;
    margin: auto;
  }
}

演示：JSFiddle

限制 div 宽度和中心

Limit div width and center

css

center

tag-cloud