css 한줄로 </ div> 이후 줄 바꿈 방지




문단 css (10)

나는이 버전을 본 적이 없다고 생각한다.

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

CSS를 사용하여 div 뒤에 줄 바꿈을 방지하는 방법이 있습니까?

예를 들면 나는 가지고있다.

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

다음과 같이 표시하려고합니다.

내 레이블 : 내 텍스트

최신 정보:

만족스런 솔루션으로 이끌어 준 CSS 솔루션을 찾지 못한 후 제안 된 답변처럼 <span> 사용하게됩니다.


DIV는 기본적으로 BLOCK 표시 요소입니다. 즉, DIV는 자체 줄에 표시됩니다. CSS 속성 디스플레이 인라인을 추가하면 원하는대로 작동합니다. 하지만 대신 SPAN을 고려해야합니다.


.label, .text {display: inline}

비록 당신이 그것을 사용한다면, 당신은 div의 span을 변경할 수도 있습니다.


display:inline;

또는

float:left;

또는

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

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

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

display:inline; divspan 과 동등한 것으로 바꿀 것입니다. margin-top , margin-bottom , padding-top , padding-bottom , height 등의 영향을받지 않습니다.

float:left; div 를 블럭 레벨 요소로 유지합니다. 여전히 블록 인 것처럼 공간을 차지하지만 폭은 내용에 적합합니다 ( width:auto; 가정). 그것은 clear:left; 요구할 수 있습니다 clear:left; 어떤 효과는.

display:inline-block; "두 세계 최고의"옵션입니다. div 는 블록 요소로 처리됩니다. 블록 요소에 예상대로 margin , paddingheight 규칙에 모두 응답합니다. 그러나 다른 요소 내에 배치하기위한 목적으로 인라인 요소로 처리됩니다.

자세한 내용은 이 부분읽으십시오 .


div는 웹 사이트에 구조를 제공하거나 많은 텍스트 또는 요소를 포함하는 데 사용되지만 레이블로 사용하는 것처럼 보일 때 span을 사용해야합니다. 그러면 두 텍스트가 자동으로 나란히 놓이게되고 라이트를 사용할 필요가 없습니다 그것을위한 CSS 코드.

그리고 다른 사람들이 요소를 떠 다니라고해도 태그를 변경하는 것이 가장 좋습니다.


이 코드를 일반 div display: inline;

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


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

.label {
     clear:none;
}

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

나는 float css 속성과 width css 속성으로 놀아서 여러 줄의 줄 바꿈없이 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;}




html