두 개의 <p> 요소를 같은 줄에 정렬

debugcn 에 게시 Dev

활기

이것은 데모 입니다.

두 <p>요소를 같은 줄에 정렬하고 싶지만 두 번째 요소가 약간 아래로 이동하는 것을 볼 수 있습니다. 이유를 아는 사람 있나요?

HTML

<div class="logo">
    <p>Hello world</p>
    <p class="web_address">Hello all</p>
</div>

CSS

.logo p {
    margin:0;
    padding:0;
    border: solid 1px black;
    margin-left: 20px;
    font-size: 36px;
    display: inline-block;
    line-height: 80px;
}

Hashem 펜

인라인 (-block) 요소 (이 경우 단락)는 기본적으로 기준선 에서 세로로 정렬 됩니다. vertical-align: top;정렬 문제를 수정하기 위해 추가 할 수 있습니다 .

업데이트 된 데모 .

.logo p {
    /* other styles goes here... */
    display: inline-block;
    vertical-align: top;
}

자세한 내용은 이 답변을 참조하십시오 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-05-30

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

두 개의 <p> 요소를 같은 줄에 정렬

두 개의 <p> 요소를 같은 줄에 정렬

두 개의 입력 상자를 같은 줄에 정렬하는 방법

두 개의 html 요소를 사용자 정의 CSS와 같은 줄에 넣으십시오.

같은 줄과 같은 컨테이너의 요소를 가운데 정렬

부트 스트랩 : 같은 행에 두 개의 버튼 정렬

두 개의 공유 플러그인 (페이스 북과 트위터)을 같은 줄에 정렬 (세로 정렬)

두 개의 span 요소를 개별적으로 동일한 줄에 정렬하는 방법

두 개의 입력 요소 아래에 두 개의 나란한 입력 요소를 가로로 정렬

두 개의 정렬 된 배열에서 k 번째로 작은 요소 찾기

HTML을 수정하지 않고 두 div를 같은 줄에 정렬

같은 줄에 두 개의 이미지와 텍스트를 설정하는 방법

의사 요소를 사용할 때 텍스트의 두 번째 줄을 첫 번째 줄에 정렬하는 방법은 무엇입니까?

이 두 요소를 같은 줄에 어떻게 만들까요?

<td>와 <div>를 같은 줄에 정렬

왜 두 개의 <p> 요소를 나란히 놓고 가운데로 정렬 할 수 없습니까?

한 목록의 요소를 정렬 한 후 두 목록의 순서가 같은지 확인

두 개의 ArrayLists (Java)에서 요소 정렬 및 교체

Android RelativeLayout은 다른 요소 테두리에 요소를 정렬합니다.

HTML5에서 목록 정의에서 같은 줄에 표시되도록 여러 요소를 정렬하려면 어떻게해야합니까?

Perl 질문. 같은 줄에있는 두 개의 변수를 대체하는 방법이 필요합니다.

테이블에서 두 개의 개별 ng-repeat 요소를 정렬하는 방법

입력 요소와 레이블을 두 개의 개별 열에 정렬

C에서 쌍의 벡터를 첫 번째 요소로 정렬 한 다음 두 번째 요소로 정렬

같은 기준으로 두 개의 int [] 정렬

같은 줄에 여러 줄을 포함하는 두 개의 div를 표시하는 방법

모르는 사이에 같은 요소를 두 번 사용하는 정규식

일괄 에코 스타일 : 같은 줄에 두 개의 문

두 개의 분할 요소를 병렬로 설정하는 방법은 무엇입니까?

같은 줄에 Div 정렬

같은 줄에 정렬