DIVタグが新しい行を開始しないようにするにはどうすればよいですか?


89

タグを含む1行のテキストをブラウザに出力したい。これがレンダリングされると、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>

私はここでそれを片付けようとしました。この表示を1行にするにはどうすればよいですか?


念のために言っておきますが、echoを使用する場合は角かっこは必要ありません。echo $id;と同じくらい有効ですecho($id);
Eddie Hart

回答:


142

divタグは、その行動を引き起こす、ブロック要素です。

span代わりに、インラインの要素を使用する必要があります。

本当に使いたい場合はdiv、を追加してくださいstyle="display: inline"。(それをCSSルールに入れることもできます)


13
display: inlineDIVの目的と矛盾するだけなので、絶対にしないでください。代わりにスパンを使用してください。
ロバートK

28
私はそれをよく知っています。だから私は書いたif you really want to
SLaks 2009

22
divは、HTML5より前のページの分割として定義されます。プレゼンテーションの特性は定義されていません。言い換えると、divは、含まれるコンテンツと要素に基づく定義に従って、意味的に適切です。結果として、divをdisplay:inlineに設定し、セマンティクスや標準定義に違反しないように設定することはまったく問題ありません。

2
私の場合、ブレークワードワードラッププロパティを定義したかったので、spanを使用できませんでした。これらは、ブロックタイプの要素に対してのみ機能します。しかし、改行が必要なかったため、divを使用できませんでした。代わりにdisplay: inline-block、div要素を使用しました。スタイルについて何を言うか、これで両方の問題が解決しました。
jsarma 2013

それは私にとってはうまくいきませんでした!divが含まれているセルを拡張すると予想しましたが、変更はありませんでした
rezKesh 2014年

36

私は専門家ではありませんが、試してみてください white-space:nowrap;

空白プロパティは、すべての主要なブラウザでサポートされています。

注:この値"inherit"は、IE7以前ではサポートされていません。IE8にはが必要!DOCTYPEです。IE9はをサポートしています"inherit"


overflow: hiddenラップ要素があり、「バックグラウンドで」親に従って移動するときに、行の終わりで折り返さないインラインブロック要素が必要な場合に
最適です

16

div はブロック要素であり、常に独自の行を占めます。

span代わりにタグを使用してください


10
あなたは機能のプレゼンテーションを混乱させています。divは、デフォルトでdisplay:blockとして表示され、他の理由がないため、独自の行を取ります。

1
しかし、スパンは前後に改行も作成しますか?
user3761308 2017


5

divとリンクでfloat:leftを使用するか、スパンを使用します。



0

ブレークラインを作成するためのより良い方法は、CSSスタイルパラメータの空白でspanを使用することです。

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>

-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>

3
cssだけで問題がない場合は、javascript + phpを使用するというひどい考えです。
zurabWeb 2014年

@Pieroどうしてそんなことを言うの?通常、フロントエンドアプリにはバックエンドが必要です
2016年

3
@Curious trueですが、バックエンドは計算やデータ処理などのバックエンドを処理する必要があり、フロントエンドはブラウザが処理できるようにする必要があります。これにより、サーバーの負荷が軽減され、ユーザーエクスペリエンスが向上します。これは一般的な用語です。ただし、この特定のケースでは、<ahref = "pagea.php?id = <?php echo $ id;?>">ページA </a>で十分です。そして、getData.phpを使用して、これをapacheで処理できるのに、なぜphpでjavascriptを解析して出力するのですか?そのように:src = "getData.js?id = <?php echo $ id;?>"
ZurabWeb 2016年

-2

あなたは単に使うことができます:

#contentInfo_new br {display:none;}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.