css - 如何自动调整一个div？

Question

我有一个关于如何自动调整 div 类大小的简短问题。

我有一些错误消息想要回显。对于这个错误消息，我有一个 div 类:

.wrapper form .error {
    color: #ccc;
    position: absolute;
    z-index: 2;
    background-color:#fff;
    height: 26px;
    line-height: 26px;
    padding: 10px; 
    border: solid #ccc;
    border-width: 1px 1px 1px 1px;
    width: 200px; /*should be auto but doesnt work*/
    line-height: 26px;
    right: 100%;
    top: 7%;
} 

我想实现的是，我的具有不同字符串长度的不同错误消息将不间断地显示在一行中，并且该 div 的宽度应根据字符串的长度自动调整大小。

Answer 1

http://jsfiddle.net/REsm3/

通过使用 white-space: nowrap，您可以获得您想要的单行结果。但是，要实现您所说的“自动宽度”样式，您的元素需要内联或内联 block 。请参阅我的 jsfiddle，了解我将如何更改您的标记以完成此操作。简而言之，我会将错误包装在一个公共(public)元素中，比如 class="message" 并将其设置为 text-align: center。然后我将 error 设置为 display: inline 从而实现您想要的“自动宽度”样式。

<div class="message">
    <div class="error">
        This is an error message
    </div>
</div>

<div class="message">
    <div class="error">
        This is an error message. This is an error message. This is an error message.
    </div>
</div>

和CSS:

.message
{
    text-align: center;
    margin-bottom: 10px;
}

.message .error
{
    border: 1px solid red;
    padding: 2px;
    white-space: nowrap;

    display: inline;
    display: inline-block;
}