3

我有一个关于如何自动调整 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 的宽度应根据字符串的长度自动调整大小。

4

4 回答 4

6

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;
}
于 2013-03-11T12:17:50.357 回答
0

用于white-space: nowrap;将其全部保存在一条线上。

于 2013-03-11T12:15:00.597 回答
0

CSS规则：

white-space: nowrap;

将防止您的换行。

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

于 2013-03-11T12:15:40.330 回答
0

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

Withdisplay: inline;或display: inline-blockthediv将尽可能宽（并且尽可能窄）以使文本适合。

JS Bin 例子

于 2013-03-11T12:17:16.527 回答