在我的应用程序中,我有一个小标签区域,我已经弹出来显示消息。这些消息的长度不同,我希望标签在宽度和高度方面占用尽可能少的空间。
为所有这些标签创建一个 id 而不是仅仅重用 CSS 似乎很愚蠢。但是,我很难根据标签动态扩展/压缩宽度。有这样做的好方法吗?是否存在 min-width 和 width: auto 的神奇组合?这是否应该在每个页面的开头使用 jquery 来处理,以使其覆盖该页面标签的宽度?我已经尝试了一些来自 google/S.O. 的方法。到目前为止,没有一个能产生我想要的结果。每次标签宽度扩展父 div。
这是我目前的尝试:
HTML:
<div id="divStatus">
<label id ="statusContainer">Loading ...</label>
</div>
CSS:
#statusContainer {
position: absolute;
margin: 0 auto;
padding: 10px 0 0 0 !important;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: #EEEEEE;
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
color: #8b6d80;
font-weight: bold;
display: inline-block;
white-space: nowrap;
width: 120px;
}
#divStatus {
position: absolute;
margin: 0 auto;
padding: 10px 0 0 0;
z-index: 101;
top: 0;
left: 0;
right: 0;
width: 100%;
}
以下是我正在尝试完成的一些屏幕截图:
有谁知道完成此任务的最简单方法吗?
最佳答案
您不需要在 absolute
position
中设置标签,因为 parent 已经如此。
Display:table;
+ margin:auto;
对你的 label
会很好。使用表格布局,label
将像一个盒子,但会根据其内容展开/缩小:DEMO .
您可以使用类轻松地重用它们: 示例:
.divStatus {
position: absolute;
margin: 0;
padding: 10px 0 0 0;
z-index: 1;
left: 0;
right: 0;
}
.statusMsg {
display:table;
margin:auto;
color:gray;
border:solid 1px;
border-radius:0.15em;
background:lightgray;
padding: 2px 5px;
}
和 HTML
<div class="divStatus">
<label class ="statusMsg">Loading ...</label>
</div>
关于javascript - 基于标签宽度的可扩展消息 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25270973/