Как авторазмер див?

Question

Как авторазмер див?

У меня есть короткий вопрос о том, как авторазмер класс див.

У меня есть несколько сообщений об ошибках, которые я хотел бы повторить. для этого errormessages у меня есть класс 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 должна автоматически определяться в зависимости от длины строк.

563 4

html css stylesheet

4 ответов:

Comments

Ничего не найдено.

Eli Gassert · Accepted Answer · 2013-03-11 14:17:50

Http://jsfiddle.net/REsm3/

С помощью white-space: nowrap Вы можете получить однострочный результат, как вы хотите. Однако для достижения стиля" auto width", как вы его называете, ваш элемент должен быть встроенным или встроенным блоком. Смотрите мой jsfiddle о том, как бы я изменил вашу разметку, чтобы выполнить это. Короче говоря, я бы завернул ошибку в общий элемент, скажем class="message" и стилизовал бы его в text-align: center. Затем я бы установил error в display: inline и таким образом достиг бы стиля "auto width", который вы хотите.
<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;
}

James Coyle · Accepted Answer · 2013-03-11 14:15:00

Используйте white-space: nowrap;, чтобы сохранить все это в одной строке.

Barney · Accepted Answer · 2013-03-11 14:15:40

Правило css:
white-space: nowrap;
Предотвратит обертывание ваших линий.

Установите ширину ошибки div на 100%, и она автоматически заполнит доступное пространство. Если вы подробно объясните, почему вам нужен автоматический размер div, я могу помочь вам в дальнейшем.

hsan · Accepted Answer · 2013-03-11 14:17:16

white-space: nowrap; будет держать текст на одной строке.

С display: inline; или display: inline-block div будет настолько широким, насколько это необходимо (и настолько узким, насколько это возможно), чтобы текст поместился.

Пример JS Bin