> 웹 프론트엔드 > 프런트엔드 Q&A > CSS p 태그를 래핑하지 않도록 설정하는 방법

CSS p 태그를 래핑하지 않도록 설정하는 방법

藏色散人
풀어 주다: 2023-01-03 09:26:23
원래의
3994명이 탐색했습니다.

줄 바꿈 없이 CSS p 태그를 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 일부 p 태그를 정의합니다. 마지막으로 CSS 스타일을 p 태그에 "p{display: inline;}"으로 추가하여 줄 바꿈 없이 표시합니다. 줄 바꿈.

CSS p 태그를 래핑하지 않도록 설정하는 방법

이 문서의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS로 감싸지 않도록 p 태그를 설정하는 방법은 무엇입니까?

p 태그는 블록 수준 요소이며 자체 라인을 차지합니다. 같은 줄에 두 개의 p 태그를 설정하려면 어떻게 해야 할까요? CSS를 사용하여 p 태그가 래핑되지 않도록 설정하는 방법을 살펴보겠습니다.

기본적으로 p 태그는 자동으로 래핑됩니다. CSS를 사용하여 p 태그가 래핑되지 않도록 설정하는 방법을 살펴보겠습니다.

Example

css code

p{display: inline;}
로그인 후 복사

HTML code

<p>aaa</p> 
<p>bbb</p>
로그인 후 복사

Rendering:

CSS p 태그를 래핑하지 않도록 설정하는 방법

p 태그가 래핑되는 것을 방지하기 위해 display:inline 스타일을 사용합니다.

디스플레이 스타일 소개:

display 속성은 요소가 생성해야 하는 상자 유형을 지정합니다.

이 속성은 레이아웃 생성 시 요소에 의해 생성되는 표시 상자 유형을 정의하는 데 사용됩니다. HTML과 같은 문서 유형의 경우 표시를 부주의하게 사용하면 HTML에 이미 정의된 표시 계층 구조를 위반할 수 있으므로 위험할 수 있습니다. XML의 경우 XML에는 이러한 종류의 계층 구조가 내장되어 있지 않으므로 모든 표시가 절대적으로 필요합니다.

【학습 영상 공유: css 영상 튜토리얼

속성 값:

none 이 요소는 표시되지 않습니다.

block 이 요소는 이 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.

인라인 기본값. 이 요소는 요소 앞이나 뒤에 줄 바꿈이 없는 인라인 요소로 표시됩니다.

inline-block 인라인 블록 요소. (CSS2.1의 새로운 값)

list-item 이 요소는 목록으로 표시됩니다.

run-in 이 요소는 상황에 따라 블록 수준 요소 또는 인라인 요소로 표시됩니다.

compact CSS에는 Compact 값이 있었지만 폭넓은 지원이 부족하여 CSS2.1에서는 제거되었습니다.

marker CSS에는 값 표시자가 있지만 광범위한 지원이 부족하여 CSS2.1에서는 제거되었습니다.

table 이 요소는 테이블 앞뒤에 줄 바꿈이 있는 블록 수준 테이블(

과 유사)로 표시됩니다.

inline-table 이 요소는 테이블 앞뒤에 줄 바꿈 없이 인라인 테이블(

과 유사)로 표시됩니다.

table-row-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(

와 유사).

table-header-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(

와 유사).

table-footer-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(

와 유사).

table-row 이 요소는 테이블 행으로 표시됩니다(

와 유사).

table-column-group 이 요소는 하나 이상의 열 그룹으로 표시됩니다(

과 유사).

table-column 이 요소는 셀 열로 표시됩니다(

와 유사)

table-cell 이 요소는 테이블 셀로 표시됩니다(

와 유사)

table -caption 이 요소는 테이블 제목으로 표시됩니다(

과 유사).

inherit는 표시 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

위 내용은 CSS p 태그를 래핑하지 않도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿