如何自动调整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您可以实现您想要的单行结果.但是,要在调用时实现"自动宽度"样式,您的元素需要内联或内联块.请参阅我的jsfiddle,了解如何更改标记以实现此目的.简而言之,我将错误包装在一个共同的元素中,比如说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;
}