Css - Отрегулируйте ширину коробки с текстом

-2

мне нужно регулировать ширину коробки с текстомCss - Отрегулируйте ширину коробки с текстом

Это HTML код:

<span class="box">Testing content of the box</span>

Это код CSS:

.box { 
    padding-left:5px; 
    padding-right:5px; 
    color: #fff; 
    background-color: #ff9c00; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
    border-radius: 0; 
    display: inline-block; 
}

будет ли это:

или это:

Всегда должны иметь такую же обивку левые и правые, независимо от размера текста.

Как я мог это сделать?

источник

2016-09-28 Eladerezador

Что случилось с вышеуказанным кодом? насколько я могу судить, он должен делать то, что вы хотите – Pete

@Pete прав ... если это 'inline', то у вас есть проблема с фоном – kukkuz

.box { 
 
    padding:10px; 
 
    color: #fff; 
 
    background-color: #ff9c00; 
 
    float: left; 
 
    clear: both; 
 
    margin-bottom:10px; 
 
    border-radius:3px; 
 
    max-width:400px; 
 
    text-align:justify; 
 
}

<span class="box">Content</span> 
 

 
<span class="box">Content, and even more content and even more content and even more content and even more content and even more content </span>

Надеется, что это помогает !!

источник

2016-09-28 10:57:24

это решение отлично спасибо :) – Eladerezador

Пожалуйста, отметьте его как правильный ответ, если он решит вашу проблему. –

Использование float: left в сочетании с clear: both

.box { 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    color: #fff; 
 
    background-color: #ff9c00; 
 
    -moz-border-radius: 0; 
 
    -webkit-border-radius: 0; 
 
    border-radius: 0; 
 
    float: left; 
 
    clear: both; 
 
    margin-bottom: 1em; 
 
}

<span class="box">Content</span> 
 

 
<span class="box">Content, and even more content</span>

источник

2016-09-28 10:42:59 LinkinTED

width: auto; должен сделать трюк здесь

.box { 
 
    padding-left:5px; 
 
    padding-right:5px; 
 
    color: #fff; 
 
    background-color: #ff9c00; 
 
    -moz-border-radius: 0; 
 
    -webkit-border-radius: 0; 
 
    border-radius: 0; 
 
    width: auto; 
 
    display: inline-block; 
 
    margin-bottom: 5px; 
 
}

<span class="box">Testing content of the box</span> 
 

 
<span class="box">Testing content of the box Testing content of the box Testing content of the box Testing content of the box </span>

источник

2016-09-28 10:43:49 MoultoB

Ширина авто абсолютно не имеет значения - удалите его и запустите свой фрагмент, и вы увидит тот же результат – Pete

Используйте min-width и max-width для установки минимального и максимального размеров разделов.

.box { 
 
    padding:10px; 
 
    color: #fff; 
 
    background-color: #ff9c00; 
 
    float: left; 
 
    clear: both; 
 
    margin-bottom:10px; 
 
    border-radius:3px; 
 
    max-width:400px; 
 
}

<span class="box">Content</span> 
 

 
<span class="box">Content, and even more content and even more content and even more content and even more content and even more content </span>

источник

2016-09-28 10:46:50

Css - Отрегулируйте ширину коробки с текстом

ответ

Смежные вопросы