CSS에서 단락 너비를 자동으로 설정하는 방법은 무엇입니까?

여기 거래가 있습니다. 내 단락에 밑줄을 긋고 text-align을 사용하는 대신에 아래에 점선 테두리를 추가하고 단락의 부모 인 가운데 div을 가운데에 배치하고 싶습니다. 이것은 작동하지 않는 코드입니다.CSS에서 단락 너비를 자동으로 설정하는 방법은 무엇입니까?

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

단락은 부모 div의 폭에 걸리는 것 같습니다 (그냥 단락 대신 전체 div에 걸쳐 국경을 추가). 단락의 폭을 포함하는 텍스트로 설정하는 방법이 있습니까? (가능하면 margin:auto 작동 할 것 같습니다.)

출처

2013-06-18 user2020058

단락은 컨테이너의 폭을 확대 할 것입니다. 그것은 그렇게하지하려면, 당신은 시도 할 수 있습니다 : 예와

p { display: inline-block; }

바이올린 : 다른 단락을 취소를해야하는 경우도 http://jsfiddle.net/HuFZL/1/

, 당신은 추가 div에 p 태그를 포장 할 수 있습니다 /집단. 이 단락은 서로 쌓아 유지하고 그 내용에서 성장하려면

출처

2013-06-18 17:59:49 SlightlyCuban

내가 뭘 찾고 있었는지, 고마워. – user2020058

display : 테이블을 더 효율적으로 만들었고, 인라인 박스로 만들지 않고 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

너비를 지정하는 대신 최대 너비 값은 어떻게됩니까? 모든 코드를 게시하거나 바이올린을 만들 수 있습니까? –

이 내가 뭘하려 ....

<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 { 
    border-bottom: 1px dotted black; 
    padding: 0px 0px 5px 0px; 
    margin: 10px 20px; 
} 

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

텍스트를 가정하면 다음이 작동 단락 요소를 채우는 :

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

당신은 국경을 정확히하고 텍스트의 폭으로합니다. 단락에 2 단어가 있으면 텍스트만큼 넓지 않습니다. 그걸 풀 수있는 유일한 방법은 범위 또는 인라인 요소가 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에서 단락 너비를 자동으로 설정하는 방법은 무엇입니까?

답변

관련 문제