Question

在我的应用程序中，我有一个小标签区域，我弹出来显示消息。这些消息的长度不同，我希望标签占据尽可能小的空间宽度和高度。

为所有这些标签创建一个id似乎很愚蠢，而不仅仅是重用CSS。但是，我很难根据标签动态扩展/压缩宽度。有这样做的好方法吗？是否有最小宽度和宽度的神奇组合：自动使用？是否应该在每个页面的开头使用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%;

}

以下是我正在努力完成的一些截图： small label

<小时/>

有谁知道实现这个目标的最简单方法？

Answer 1

您不需要在absolute position中设置标签，因为父母已经是这样。

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>

Answer 2

找到了一个解决方案，非常类似于@GCyrillus的答案，但稍微调整一下，让它挂在顶端我想要的方式：

#statusContainer {
    margin: auto;
    padding: 10px 5px 0 5px;
    background: #EEEEEE;
    text-align: center;
    line-height: 2.5;
    -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: table;
    white-space: nowrap;
    min-width: 120px;
    top: 0;
    z-index: 101;
}

#divStatus {
    position: absolute;
    margin: 0;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
}

感谢您的帮助！

基于标签宽度的可扩展消息div

2 个答案: