</ div> 이후 줄 바꿈 방지

CSS로 div 후 줄 바꿈을 방지하는 방법이 있습니까?

예를 들어

<div class="label">My Label:</div>
<div class="text">My text</div>

다음과 같이 표시되기를 원합니다.

내 레이블 : 내 텍스트

display:inline;

또는

float:left;

또는

display:inline-block; -모든 브라우저에서 작동하지 않을 수 있습니다.

div여기 를 사용하는 목적은 무엇입니까 ? span인라인 수준 요소 인 반면 a div는 블록 수준 요소 이므로을 제안합니다 .

위의 각 옵션은 다르게 작동합니다.

display:inline;바뀝니다 diva의 동등한로 span. 그것은에 의해 영향을받지 않습니다 margin-top, margin-bottom, padding-top, padding-bottom, height, 등

float:left;div블록 수준 요소로 유지합니다 . 블록 인 것처럼 여전히 공간을 차지하지만 너비는 콘텐츠에 맞춰집니다 (가정 width:auto;). clear:left;특정 효과를 위해 를 요구할 수 있습니다 .

display:inline-block;"양쪽 세계의 최고"옵션입니다. 은 div블록 요소로 취급된다. 그것은 모든 응답 margin, padding및 height블록 요소에 대해 예상대로 규칙. 그러나 다른 요소 내에 배치 할 목적으로 인라인 요소로 처리됩니다.

자세한 내용은 이것을 읽으십시오 .

.label, .text {display: inline}

그것을 사용한다면 div를 span으로 변경하는 것이 좋습니다.

DIV는 기본적으로 BLOCK 표시 요소이며, 이는 자체 행에 있음을 의미합니다. CSS 속성 display : inline을 추가하면 원하는 방식으로 작동합니다. 하지만 대신 SPAN을 고려해야합니까?

<span class="label">My Label:</span>
<span class="text">My text</span>

div요소는 그래서 기본적으로 그들은 전체 사용 가능한 폭을 UPP 걸릴 블록 요소입니다.

한 가지 방법은이를 인라인 요소로 바꾸는 것입니다.

.label, .text { display: inline; }

이는 span요소 대신 요소 를 사용하는 것과 동일한 효과를 갖습니다 div.

또 다른 방법은 요소를 플로팅하는 것입니다.

.label, .text { float: left; }

이렇게하면 요소의 너비가 결정되는 방식이 변경되어 내용만큼만 넓어집니다. 또한 이미지가 서로 옆으로 흐르는 방식과 유사하게 요소가 서로 옆에 떠있게합니다.

요소 변경을 고려할 수도 있습니다. div요소가 문서 부서를 대상으로, 나는 일반적으로 사용 label하고 span이 같은 구조에 대한 요소를 :

<label>My Label:</label>
<span>My text</span>

div는 웹 사이트에 구조를 제공하거나 많은 텍스트 또는 요소를 포함하는 데 사용되지만 레이블로 사용하는 것처럼 보이므로 span을 사용해야합니다. 두 텍스트를 자동으로 서로 옆에 배치하므로 작게 할 필요가 없습니다. CSS 코드입니다.

그리고 다른 사람들이 요소를 플로팅하라고하더라도 태그 만 변경하는 것이 가장 좋습니다.

이 버전을 본 적이없는 것 같습니다.

<div class="label">My Label:<span class="text">My text</span></div>

<div id="hassaan">
     <div class="label">My Label:</div>
     <div class="text">My text</div>
</div>

CSS :

#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}

clear:nonecss 속성을 레이블에 적용 해보십시오 .

.label {
     clear:none;
}

div를 CSS로 띄우십시오.

.label {
float:left;
width:200px;
}
.text {
float:left;
}

나는 float css 속성과 width css 속성을 가지고 놀면서 줄 바꿈없이 div를 얻는 데 여러 번 성공했습니다.
물론 솔루션을 만든 후에는 모든 브라우저에서 테스트해야하며 각 브라우저에서 모든 상황에서 작동하는지 확인하기 위해 창 크기를 조정해야합니다.

일반 div에이 코드 사용 display: inline;

이 코드를 테이블 display: inline-table; 보다 테이블 에서 사용하는 경우 사용하십시오.

텍스트 CSS에서 줄 바꿈을 방지하려면 다음을 시도하십시오 div.

white-space: nowrap;