CSS では、display 属性を使用して、別の行を占めるラベルのスタイルを削除できます。この属性の値が "inline" の場合、ラベルはインライン要素として表示されるように設定されます。このとき、ラベルの前後には改行がなく、行を占有せず、具体的な構文は「label element object {display:inline;}」となります。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css で別の行を占めるタグのスタイルを削除する方法
タグが別の行を占める理由は、一部のタグがブロック レベルの要素: ブロック レベルの要素は、親要素 (コンテナ) の水平方向のスペース全体と、そのコンテンツの高さに等しい垂直方向のスペースを占有し、「ブロック」を作成します。ラベルが独自の行を占めるのを防ぐには、ラベルをインライン要素として設定し、要素の前後の改行を削除するだけです。
現時点では、表示属性を使用する必要があります。ラベルの表示属性値を inline に設定するだけで済みます。つまり、この要素はインライン要素として表示され、要素の前後に改行はありません。これにより、ラベルが 1 行を占める影響がなくなります。
例は次のとおりです:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h3 class="h">测试标签</h3> 测试文字 </body> </html>
出力結果:
スタイルをタグに追加した後:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style type="text/css"> .h{ display:inline; } </style> <body> <h3 class="h">测试标签</h3> 测试文字 </body> </html>
出力結果:
(学習ビデオ共有: css ビデオチュートリアル)
以上がCSSでタグが単独で行を占めるスタイルを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。