p 태그로 새 줄을 피하는 방법은 무엇입니까?

104

태그로 작업하는 동안 같은 줄을 유지하려면 어떻게 해야합니까?

html css tags

— 조롱
소스

이미지와 텍스트 회전 목마 만들려

— 조쉬

19

@Nishant : 그런 다음 . 단락을 의미합니다.

— Steve Harrison

6

@Nishant : 당신이해야 할 때 강제로 (예를 만드는 등 특정 방식으로 작동하는 태그 display: inline;가 아닌 display: block;), 당신이 잘못된 태그를 사용 할 수 있다는 좋은 표시가 ...이다

— 스티브 해리슨

171

display: inlineCSS 속성을 사용합니다 .

이상적 : 스타일 시트에서 :

#container p { display: inline }

나쁜 / 극단적 인 상황 : 인라인 :

<p style="display:inline">...</p>

— Doug Neiner
소스

11

올바른 CSS,하지만 원래 질문 댓글의 소년이 옳습니다 ... 왜 이렇게 할 것인지 자문 해보세요 ... SPAN이 상황에 더 적합 해 보입니다.

— one.beat.consumer

5

Span은 동일하며 새 줄로 이동하지 않습니다! 등은 one.beat.consumer말했다

— Anicho

+1 반응 형 미디어 쿼리를 사용하여 모바일 장치의 공간을 절약하는 데 유용합니다. : D

— gef

저는 angularJS에서 일하고 있으며 'ng-repeat'로 단락을 반복해야했는데 완벽하게 작동했습니다. 그리고 Span은 나에게 오류를 주었다.

— sch

출력이 태그를 구분 기호로 사용하는 프로그램을 다룰 때 이것이 필요합니다. 예를 들어 장고 양식.

— Jim Paul

69

단락 태그는 텍스트의 단락을 지정하기위한 것입니다. 텍스트가 새 줄로 시작하지 않도록하려면 태그를 잘못 사용하는 것이 좋습니다 . 아마도 태그가 당신이 달성하고자하는 것에 더 가깝게 맞을 것입니다 ...?

— 스티브 해리슨
소스

1

이것은 받아 들여진 대답이어야합니다. 질문에 대한 직접적인 대답은 없지만 아마도 문제에 대한 더 나은 해결책 일 것입니다.

— Fr4nc3sc0NL

19

나는 CSS를 위해 이것을 보았습니다.

span, p{overflow:hidden; white-space: nowrap;}

유사한 stackoverflow 질문을 통해

— Ackushiw
소스

1

나는 overflow : hidden이 필요하지 않았다. 감사합니다

— StinkyCat

5

다음과 같이 :

p
{
    display:inline;
}

스타일 시트에서 모든 p 태그에 대해 수행합니다.

— 존 보커
소스

2

Flexbox가 작동합니다.

.box{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  align-items:center;
  border:1px solid #e3f2fd;
}
.item{
  flex: 1 1 auto;
  border:1px solid #ffebee;
}

<div class="box">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
</div>

스 니펫 확장

— 로니 로이스 톤
소스