2

以下のコードを使用しています

​<div align="left">
Line 1
</div>
<div align="right">
Line 2
</div>

Line 1同じ行の左側と右側の出力を期待していましLine2たが、2 行で出力されます。これを1行で取得するにはどうすればよいですか？

jsfiddle

4

3 に答える 3

2 
<div style="float: left">Line 1</div>
<div style="text-align: right">Line 2</div>
于 2012-07-14T19:04:07.220 に答える
2

HTML/CSS は初めてだと思いますので、スタイリングの仕組みに関する初心者向けチュートリアルを読むことをお勧めします。

div 要素はデフォルトで「display: block」に設定されているため、表示されているのは意図した動作です。最初の div の幅は親要素の幅全体を占めているため、2 番目の div がレンダリングされると、下の行にドロップされます (最初の div の「隣」に収まらなくなるため)。

他の回答が指摘しているように、スタイルを左または右にフロートするように設定する必要があります (要素の幅はそれに応じて変化します)。

これが新しいフィドルです: http://jsfiddle.net/7zqJY/3/ </p>

于 2012-07-14T19:15:05.910 に答える
0 
<div style="float:left; width:100px;">
  Line 1
</div>
<div style="float:left; width:100px;">
  Line 2
</div>
​
于 2012-07-14T19:05:44.423 に答える