Как установить ширину абзаца автоматически в CSS?

Вот сделка. Вместо того, чтобы просто подчеркивать мой абзац и использовать text-align, я хочу добавить пунктирную границу под ним и центрировать его внутри родителя абзаца div. Это мой код, который не работает. (Он добавляет границу по всей div, а не только в пункте)Как установить ширину абзаца автоматически в CSS?

p { 
    border-bottom:1px dotted; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
}

В этом пункте, кажется, принимает на ширину родительского div. Есть ли способ установить ширину абзаца в текст, который он содержит? (Кажется, что margin:auto будет работать, если это возможно.)

источник

2013-06-18 user2020058

Пункты собираются расширить до ширины их контейнеров. Для того, чтобы не делать этого, вы можете попробовать:

p { display: inline-block; }

Fiddle с примером: http://jsfiddle.net/HuFZL/1/

Кроме того, вы можете обернуть p теги в дополнительном div, если вам нужно, чтобы очистить другие пункты/элементы.

источник

2013-06-18 17:59:49 SlightlyCuban

Только то, что я искал, спасибо. – user2020058

дисплей: таблица более эффективная, и не нужно делать их как встроенные, а затем обертывать их в div –

Я не знал о 'display: table' и размере. Раньше я настраивал IE7, поэтому я немного не знаю об этом. Благодаря! – SlightlyCuban

Попробуй добавить значение ширины для вашего пункта, в противном случае пункт будет заполнить всю ширину родительского контейнера и значение полого ничего не будет делать:

p { 
    border-bottom:1px dotted; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    width: 100px; /* whatever width you want */ 
}

источник

2013-06-18 17:51:57

Спасибо за ответ, но для меньшего пункта, который оставит границу больше, чем текст. Я ищу способ, чтобы граница ограничивала ширину текста. – user2020058

Как насчет значения max-width вместо указания ширины? Можете ли вы опубликовать весь свой код или сделать скрипку? –

Это то, что я пытался ....

<html> 

<style> 
{ 
border-bottom:1px dotted; 
margin-left:auto; 
margin-right:auto; 
text-align:center; 
} 

#custom 
{ 
width : 10px; 
} 

</style> 

<div id="custom"><p>dddd</p></div> 

</html>

источник

2013-06-18 17:53:54 psniffer

, если вы хотите, чтобы пункт укладки друг на друг и растет от их содержаний, что вы должны нужны:

p { 
     display: table; 
     margin:auto; 
     border-bottom:1px dotted; 
}

источник

2013-06-18 18:11:34

Нет, запас авто не будет изменять размер элемента абзаца. Он просто пытается автоматически определить соответствующий размер поля на участках с автоматическим размером элемента. В принципе, если вы хотите, чтобы абзац был меньше, чем содержащий его div, вы можете установить статическую ширину абзаца (ов) как определенную ширину или процент от внутренней ширины родительского элемента. Другой вариант, если вы не хотите делать статический размер абзаца (ов), должен был бы установить дополнение к родительскому элементу или задать статические поля для абзаца (ов).

div.paragraph-container { 
    padding: 20px; /* or padding: 20px 20px 20px 20px; sets all the padding individually (top, right, bottom, left) */ 
}

Это сделало бы все пункты центра внутри DIV и быть 40px меньше, предполагая, что пункты не имеют полей.

div.paragraph-container p { 
    margin: 10px 20px; /* sets the margin on the paragraph(s) to 10px on top and bottom and 20px on left and right which does the same as the first example assuming that the div does not have padding. */ 
}

Если вы хотите, чтобы граница точно ширина текста затем:

div.paragraph-container p { 
    border-bottom: 1px dotted black; 
    padding: 0px 0px 5px 0px; 
    margin: 10px 20px; 
} 

div.paragraph-container { 
    padding: 0px; 
}

Предполагая, что текст заполняет абзац элемент, то это будет работать. Если в абзаце есть 2 слова, это будет не так широко, как текст. Единственный способ вытащить это с помощью встроенного элемента, такого как span или элемент, который был установлен в display: inline;, но встроенные элементы будут смешаны бок о бок, если вы не поместите между ними элемент блока.

источник

2013-06-18 18:19:07 txpeaceofficer09

Благодарим вас за добавление подсветки синтаксиса @Hemerson. Теперь я знаю, как это сделать. – txpeaceofficer09

ПУЛЕНЕПРОБИВАЕМОГО путь

HTML

<div class="container"> 
<p><p> 
</div>

CSS

.container { text-align:center; } 
.container p { 
    display: table; 
    margin:0 auto; 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
}

источник

2014-02-17 14:16:48 comonitos

не будет вторым значением переопределения значения сначала? – Izzy

Как установить ширину абзаца автоматически в CSS?

ответ

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