내용과 동일한 너비

내용과 동일한 너비

---

CSS의 width 속성에 문제가 있습니다. div 안에 몇 개의 단락이 있습니다. 단락의 너비를 내용과 동일하게하여 녹색 배경이 텍스트의 레이블처럼 보이도록 만들고 싶습니다. 대신 내가 얻는 것은 단락이 더 넓은 div 아버지 노드의 너비를 상속한다는 것입니다.

#container {
  width: 30%;
  background-color: grey;
}

#container p {
  background-color: green;
}

<div id="container">
  <p>Sample Text 1</p>
  <p>Sample Text 2</p>
  <p>Sample Text 3</p>
</div>

---

기본적으로 p태그는 block요소이므로 상위 요소의 100 %를 차지합니다 width.

다음을 사용하여 표시 속성을 변경할 수 있습니다.

#container p {
   display:inline-block;
}

그러나 그것은 요소들을 나란히 놓는다.

각 요소를 고유 한 줄에 유지하려면 다음을 사용할 수 있습니다.

#container p {
   clear:both;
   float:left;
}

_{(float를 사용하고 플로팅 요소를 지워야하는 경우 다음 링크에서 다른 기술을 참조하십시오. http://css-tricks.com/all-about-floats/ )}

데모 : http://jsfiddle.net/CvJ3W/5/

편집하다

솔루션을 사용 display:inline-block하지만 각 항목을 한 줄로 유지하려면 각 항목 <br>뒤에 태그를 추가하면됩니다 .

<div id="container">
  <p>Sample Text 1</p><br/>
  <p>Sample Text 2</p><br/>
  <p>Sample Text 3</p><br/>
</div>

새 데모 : http://jsfiddle.net/CvJ3W/7/

---

너비를 최대 콘텐츠로 설정했고 저에게 효과적이었습니다.

width: max-content;

---

스타일링에 추가 display: inline-block;하려면 다음 p을 수행해야합니다.

http://jsfiddle.net/pyq3C/

#container p{
    background-color: green;
    display: inline-block;
}

---

이 솔루션은 각 요소 뒤에 inline-block삽입해야합니다 <br>.
이 솔루션은 float모든 요소를 ​​"clearfix"div로 래핑하도록합니다.

또 다른 우아한 해결책은 display: table요소 에 사용 하는 것입니다.

이 솔루션을 사용하면 수동으로 줄 바꿈을 삽입 할 필요가 없습니다 (예 : with inline-block), 요소 주위에 래퍼가 필요하지 않으며 (예 : floats) 필요한 경우 요소를 중앙에 배치 할 수 있습니다.

http://jsfiddle.net/8md3jy4r/3/

---

display:inline-block여백을 설정 하고 조정하십시오.

여기 바이올린 : http://jsfiddle.net/Q2MrC/

---

다음 중 하나를 사용할 수 있습니다.

1) 디스플레이 : 인라인 블록 :

http://jsbin.com/feneni/edit?html,css,js,output

줄 주석 해제

 float:left;
 clear:both 

부모 컨테이너가 축소 된 것을 알 수 있습니다.

2) 디스플레이 사용 : 표

http://jsbin.com/dujowep/edit?html,css,js,output

---

width 속성을 다음과 같이 설정합니다. width : fit-content

demo: http://jsfiddle.net/rvrjp7/pyq3C/114

---

이를 위해 flex를 사용할 수 있습니다.

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

flex-start 내용에 맞게 어린이의 너비를 자동으로 조정합니다.

---

display:inline-block;그것을 사용하면 다음과 같은 공백이 있는 올바른 문장에서만 작동합니다.

#container {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
    display:inline-block;
    background-color: green;
}

<h5>Correct sentence with spaces </h5>
<div id="container">
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<h5>No specaes (not working )</h5>
<div id="container">
    <p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa</p>
</div>

왜 사용하지 word-wrap: break-word;않습니까? 긴 단어가 다음 줄로 나뉘어 줄 바꿈 될 수 있도록 만들어졌습니다.

#container {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
   word-wrap: break-word;
    background-color: green;
}

<h5> Correct sentence with spaces </h5>
<div id="container">
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<h5>No specaes</h5>
<div id="container">
    <p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa</p>
</div>

---

Try using a <span> element instead. Or if you prefer, try display:inline

---

If you are using display: flex for whatever reason and need on browsers like Edge/IE, you can instead use:

display: inline-flex

With ~97% browser support for inline-flex.

---

Despite using display: inline-block. My div would fill the screen width when the children elements had their widths set to % of parent. If anyone else is looking for a solution to this and doesn't mind using screen proportion instead of parent proportion, replace the % with vw for width (Viewport Width), or vh for height (Viewport Height).

---

just use display: table; on your case.

참고URL : https://stackoverflow.com/questions/20383622/width-equal-to-content