집 > 기사 > 웹 프론트엔드 > CSS로 감싸지 않도록 p 태그를 설정하는 방법

CSS로 감싸지 않도록 p 태그를 설정하는 방법

青灯夜游원래의: 2021-01-27 18:29:2416385검색

p 태그를 감싸지 않도록 설정하는 방법: 표시 속성을 사용하고 p 태그 요소의 표시 속성 값을 "inline" 또는 "inline-block"으로 설정하면 p 태그가 다음과 같이 표시됩니다. 인라인 요소 또는 인라인 블록 요소의 경우 요소 앞뒤에 줄 바꿈이 없으므로 줄 바꿈을 만들 수 없습니다.

이 기사의 운영 환경: Acer S40-51, CSS3&&HTML5&&HBuilder 요소는 자체 라인을 차지합니다. 기본적으로 p 태그는 자동으로 래핑됩니다.

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css设置p标签不换行</title>
		<style>
			p{
				background: pink;
			}
		</style>
	</head>
	<body>
		<p>测试文本。</p>
		<p>测试文本。</p>
		<!-- 
		p标签是块级元素，会独占一行
		默认情况下p标签会自动换行的
		 -->
	</body>
</html>

렌더링:

p 태그가 줄 바꿈되지 않도록 하려면 같은 줄에 두 개의 p 태그를 설정하는 방법은 무엇입니까?

p 태그를 감싸지 않도록 설정

css p 태그가 감싸지 않도록 "display:inline;" 또는 "display:inline-block;" 스타일을 설정할 수 있습니다.

CSS로 감싸지 않도록 p 태그를 설정하는 방법 예:

Rendering:

display:inline;

CSS로 감싸지 않도록 p 태그를 설정하는 방법

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

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

CSS로 감싸지 않도록 p 태그를 설정하는 방법 속성 값:

<strong>display:inline;</strong>

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

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

inline-block 인라인 블록 요소에는 요소 앞뒤에 줄 바꿈이 없습니다. (CSS2.1의 새로운 값)
인라인 요소의 특성:
너비와 높이 설정이 유효하지 않습니다.

여백 설정은 왼쪽 및 오른쪽 방향으로만 유효하고 위쪽으로는 유효하지 않습니다. 패딩 설정은 위, 아래, 왼쪽 및 오른쪽 모두에 유효합니다. 즉, 공간이 확장됩니다.

자동 줄바꿈 없음
인라인 블록 요소의 특성:
자동 줄 바꿈 없음

너비와 높이 식별 기능

기본 배열은 왼쪽에서 오른쪽으로
더 많은 프로그래밍 관련 지식을 보려면
프로그래밍 비디오
를 방문하세요! !

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

html5 css css3 html xml display margin padding

성명：

이전 기사：CSS에서 글꼴 크기를 설정하는 방법다음 기사：CSS에서 글꼴 크기를 설정하는 방법