如何解决限制div的宽度和中心
我正在写标签云。当显示在电话上时,它会显示完整宽度并看起来不错。但是在桌面上,它也显示完整宽度,并且看起来不像我想要的那样。我想将台式机上div的宽度限制为总宽度的一部分,例如60%。但是,正如您在我的jsfiddle中所看到的那样,当显示扩大时,文本变成一个长行。我尝试应用在这里找到的各种建议,例如最大宽度,但似乎没有什么不同。有人可以指出如何执行此操作吗?这是我的代码:
<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>
解决方法
您必须使用媒体查询来控制某些屏幕尺寸的宽度。请注意,我使用了4个媒体查询,这是各种屏幕尺寸的常见断点(通常由Bootstrap 4使用);对于最小的屏幕尺寸(
还要注意,我已经将display
的{{1}}从container
更改为inline
,为元素赋予width属性。
inline-block
演示:JSFiddle
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。