Jak automatycznie ustawić szerokość akapitu w CSS?

Oto umowa. Zamiast tylko podkreślenia mojego akapitu i korzystania z text-align, chcę dodać u dołu przerywaną ramkę i wyśrodkować ją wewnątrz rodzica akapitu div. To jest mój kod, który nie działa. (Dodaje granicę na całej div zamiast tylko akapicie)Jak automatycznie ustawić szerokość akapitu w CSS?

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

ustęp wydaje się być przy szerokości rodzica div. Czy istnieje sposób na ustawienie szerokości akapitu na tekst, który zawiera? (Wydaje się, że margin:auto będzie działać, jeśli to możliwe).

Źródło

2013-06-18 user2020058

Paragrafy zamierzamy poszerzyć do szerokości pojemnikach. Aby nie robić, można spróbować:

p { display: inline-block; }

Fiddle z przykładu: http://jsfiddle.net/HuFZL/1/

Również możesz owinąć p tagi w dodatkowym div, jeśli trzeba je wyczyścić inne paragrafy /elementy.

Źródło

2013-06-18 17:59:49 SlightlyCuban

Właśnie tego szukałem, dzięki. – user2020058

display: tablica jest bardziej wydajna i nie trzeba ich tworzyć jako inline-boxów, a następnie owijać je w div –

Nie wiedziałem o "display: table" i rozmiarach. Wcześniej celowałem w IE7, więc jestem trochę nieświadomy tego. Dzięki! – SlightlyCuban

spróbuj dodać szerokość wartość swojej ust, inaczej ustęp wypełni całą szerokość kontenera nadrzędnego i wartości marginesów nic nie zrobi:

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

Źródło

2013-06-18 17:51:57

Dzięki za odpowiedź, ale dla mniejszej ustępie że opuści granicę dłużej niż tekst. Poszukuję sposobu, aby granica obejmowała tylko szerokość tekstu. – user2020058

Co z wartością maksymalnej szerokości zamiast określania szerokości? Czy możesz opublikować cały swój kod lub stworzyć skrzypce? –

to co próbowałem ....

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

Źródło

2013-06-18 17:53:54 psniffer

jeśli chcesz ustęp zachować układania na siebie i rozwijać się z ich treścią, co powinien, czego potrzebujesz to:

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

Źródło

2013-06-18 18:11:34

Nie, margines auto nie zmieni rozmiaru elementu akapitu. Po prostu próbuje automatycznie określić odpowiedni rozmiar marginesu na stronach o automatycznym rozmiarze elementu. Zasadniczo, jeśli chcesz, aby akapit był mniejszy niż element div, który go zawiera, możesz ustawić statyczną szerokość akapitów jako określoną szerokość lub procent wewnętrznej szerokości elementu rodzica. Inną opcją, jeśli nie chcesz wykonywać statycznych rozmiarów akapitów, jest ustawienie wypełnienia na elemencie nadrzędnym lub ustawienie marginesów statycznych na akapitach.

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

Spowoduje to, że wszystkie akapity będą znajdować się w środku elementu div i będą o 40 pikseli mniejsze, zakładając, że akapity nie mają marginesów.

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. */ 
}

Jeśli chcesz granica być dokładnie szerokość tekstu następnie:

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

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

Zakładając tekst wypełnia element akapitu to będzie działać. Jeśli masz dwa słowa w akapicie, to nie będzie on tylko tak szeroki jak tekst. Jedynym sposobem, aby to zrobić, byłby element liniowy, taki jak przęsło lub element, który został ustawiony na display: inline;, ale elementy śródliniowe zostaną pogrupowane obok siebie, chyba że umieścisz między nimi element blokujący.

Źródło

2013-06-18 18:19:07 txpeaceofficer09

Dziękujemy za dodanie podświetlania składni @Hemerson. Teraz wiem, jak to zrobić. – txpeaceofficer09

kuloodporne sposób

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

Źródło

2014-02-17 14:16:48 comonitos

nie zastąpi wartości wyświetlanej przesłania pierwszej? – Izzy

Jak automatycznie ustawić szerokość akapitu w CSS?

Odpowiedz

Powiązane problemy