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;
}

Answer 2

使用white-space: nowrap;将所有内容保存在一行。

Answer 3

css规则：

white-space: nowrap;

会阻止你的换行。

将错误div的宽度设置为100％，它将自动填充可用空间。如果您详细说明为什么需要自动调整div，我可能会进一步提供帮助。

Answer 4

white-space: nowrap;会将文字保留在一行。

使用display: inline;或display: inline-block，div将尽可能宽（并尽可能缩小）以使文字适合。

JS Bin example

如何自动调整div？

4 个答案: