[ HTML ] form, h1 などのブロック要素を改行させない ( display:inline )

Pocket

HTML では form や h1 などのブロック要素はブラウザでは改行されて表示されます。span などのインライン要素などは明示的に改行しない限りはブラウザでは改行されることなく表示されます。

スポンサーリンク

ブロック要素の表示例

HTMLサンプル

<html>
  <head>
    <title>フォームのデフォルトであるブロック要素として表示</title>
  </head>
  <body>
      フォームの上
      <form action="#">
        フォームの中
      </form>
      フォームの下
  </body>
</html>

ブラウザ表示結果

フォームの上 

フォームの中 

フォームの下 

ブロック要素を改行させない

css の display プロパティに inline を設定することでブロック要素も改行させずに、ブラウザで表示させることができます。

<html>
  <head>
    <title>form をインライン要素に変更</title>
  </head>
  <body>
      フォームの上
      <form action="#" style="display:inline;">
        フォームの中
      </form>
      フォームの下
  </body>
</html>

ブラウザの表示結果

フォームの上 フォームの中 フォームの下
スポンサーリンク


Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>