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

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

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

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

10
css html paragraph

7 ответов

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

p { display: inline-block; }

возиться с примером:http://jsfiddle.net/HuFZL/1/

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

30

Если вы хотите, чтобы абзац продолжал складываться друг на друга и расти из их содержимого, вам нужно:

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

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

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

Это то, что я пробовал ....

<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>
0

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

0

пуленепробиваемый способ

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

Вы можете использовать span для автоматической установки ширины.

Я полагаю, это не должно быть пункта?

CSS:

.container {
   width: 100%;
   height: auto;
   background: #ff0000;
   text-align: center;
}

.myText {
   width: auto;
   background: #ffff00;
}

HTML-код:

<div class="container">
    <span class="myText">Hello</span>
</div>
0