DIV 태그가 새 줄을 시작하지 않도록하려면 어떻게해야합니까?

89

태그가 포함 된 브라우저에 한 줄의 텍스트를 출력하고 싶습니다. 이것이 렌더링되면 DIV가 새 줄을 생성하는 것처럼 보입니다. 같은 줄의 div 태그에 콘텐츠를 어떻게 포함시킬 수 있습니까?-여기 내 코드가 있습니다.

<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
<div id="contentInfo_new">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

나는 여기를 정리하려고 노력했습니다. 이 디스플레이를 한 줄에 표시하려면 어떻게해야합니까?

html css

— 찾으시는 주소가 없습니다
소스

지적하자면 echo를 사용할 때 대괄호가 필요하지 않습니다. echo $id;만큼 유효합니다 echo($id);.

— Eddie Hart

142

div태그는 그 동작을 유발하면, 블록 요소이다.

span대신 인라인 요소를 사용해야합니다 .

당신이 경우 실제로 사용하려면 div, 추가 style="display: inline". (CSS 규칙에 넣을 수도 있습니다)

— SLaks
소스

13

display: inlineDIV가 무엇을위한 것인지 모순 될 뿐이 므로하지 마십시오! 대신 스팬을 사용하십시오.

— Robert K

28

나는 그것을 잘 알고 있습니다. 그래서 내가 if you really want to.

— SLaks

22

div는 HTML5 이전에 페이지의 한 부분으로 정의됩니다. 프레젠테이션 특성으로 정의되지 않았습니다. 즉, div는 포함 된 내용과 요소를 기반으로하는 정의에 따라 의미 상 적절합니다. 결과적으로 div를 display : inline으로 설정하고 의미론이나 표준 정의를 위반하지 않는 것이 좋습니다.

2

제 경우에는 break-word 단어 줄 바꿈 속성을 정의하고 싶었 기 때문에 span을 사용할 수 없었고 그것들은 블록 유형 요소에서만 작동합니다. 하지만 새 줄을 원하지 않았기 때문에 div를 사용할 수 없었습니다. 그래서 대신 display: inline-blockdiv 요소를 사용했습니다. 스타일에 대해 무엇을 할 것인지 말하지만 이것은 두 가지 문제를 모두 해결했습니다.

— jsarma 2013

그것은 나를 위해 일하지 않았습니다! div가있는 셀을 확장 할 것으로 예상했지만 변경이 발생하지 않았습니다.

— rezKesh 2014

37

나는 전문가는 아니지만 시도 white-space:nowrap;

공백 속성은 모든 주요 브라우저에서 지원됩니다.

참고 :이 값 "inherit"은 IE7 및 이전 버전에서 지원되지 않습니다. IE8에는 !DOCTYPE. IE9는 "inherit".

— Shivanshu
소스

줄 overflow: hidden바꿈 요소 가있을 때 줄의 끝에서 줄 바꿈하지 않도록 인라인 블록 요소가 필요 하고 부모 "백그라운드"에 따라 이동해야 할 때 좋습니다. :)

— jave.web

16

div 항상 자체 줄을 차지하는 블록 요소입니다.

사용 span대신에 태그를

— Cobbal
소스

10

기능에 대한 프레젠테이션이 혼란 스럽습니다. div는 기본적으로 다른 이유없이 display : block으로 표시되기 때문에 자체 행을 차지합니다.

1

그러나 스팬은 또한 전후에 줄 바꿈을 생성합니까?

— user3761308

6

style="display: inline"div에 추가 하십시오.

— 프란츠
소스

5

div 및 링크에서 float : left를 사용하거나 스팬을 사용하십시오.

— 짐메
소스

1

css 속성 사용-공백 : nowrap;

— Jithjob Ignatious
소스

0

줄 바꿈을 수행하는 더 좋은 방법은 CSS 스타일 매개 변수 공백과 함께 span을 사용하는 것입니다. nowrap;

span.nobreak {
  white-space: nowrap;
}

or
span.nobreak {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

HTML에서 직접 예제

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>

— 알렉스. Manfrin
소스

-1

<div style="float: left;">
<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
</div>
<div id="contentInfo_new" style="float: left;">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

— dfilkovi
소스

3

CSS만으로 괜찮을 때 javascript + php를 사용하는 끔찍한 아이디어.

— ZurabWeb

@Piero 왜 그렇게 말합니까? 백엔드는 일반적으로 프런트 엔드 앱에 필요합니다

— Curious

3

@Curious는 사실이지만 백엔드는 계산 및 데이터 처리와 같은 백엔드 작업을 처리해야하며 프론트 엔드는 브라우저가 처리하도록 남겨 두어야합니다. 이렇게하면 서버로드가 줄어들고 사용자 경험이 향상됩니다. 이것은 일반적인 용어입니다. 그러나이 특별한 경우에는 <a href="pagea.php?id=<?php echo $id; ?> "> 페이지 A </a>면 충분합니다. 그리고 getData.php를 사용하여 Apache에서 처리 할 수있는 경우 왜 PHP를 구문 분석하고 자바 스크립트를 출력해야합니까? 다음과 같이 : src = "getData.js? id = <? php echo $ id;?>"

— ZurabWeb

-2

다음을 간단히 사용할 수 있습니다.

#contentInfo_new br {display:none;}

— 사용자 3012794
소스