クロム及び固定幅は、本部長またはその他のタグ）

StackOverflow https://stackoverflow.com/questions/1900078

質問

しているのか教えてくださいhtmlるようになります: 

<div style="{ display:inline; width: 80px}">fig</div>vitamin c<br>
<div style="{ display:inline; width: 80px}">apple</div>vitamin a<br>
<div style="{ display:inline; width: 80px}">coconut</div>vitamin <br>

に打ち出されている。-8このとして表示してお

fig       vitamin
apple     vitamin
coconut   vitamin

すべてのビタミン"でも揃います。クロムのギャップが作成され、そのためではなく描画されます。 

figvitamin
applevitamin
coconutvitamin

ここでの問いはこの問題/bugクロームでは、htmlでは正しくない、ie8（この場合）まで推測しい私の意図?

役に立ちましたか？

解決

ChromeやFirefoxを使用しています。幅が変わってきているんですけどスタイル性のためのインラインです。くつかの方法があります:

インラインブロック

を実行します。

<span>fig</span>vitamin<br>
<span>apple</span>vitamin<br>
<span>coconut</span>vitamin

：

span { display: inline-block; width: 80px; }

願い <span> の代わりに <div>.には理由があります。 <span>sが自然に display: inline による Quirksmode:

IE6と7 inline-block 作品 み要素の自然 display: inline.

Firefox2の低下をサポートしないこ 値とします。利用できる -moz-inline-box, でもこれと同じではありません inline-block, で動作しない場合がありとして 期待することです。

山車

できるfloatの左側のラベル:

<div>fig</div>vitamin<br>
<div>apple</div>vitamin<br>
<div>coconut</div>vitamin

：

div { float: left; clear: left; width: 80px; }

の場合はテキストの後に <div> が十分に大きいラップを 始 の線なの80pxバッファ).ございます。

定義リスト

このマークアップ:

<dl>
  <dt>fig</dt><dd>vitamin</dd>
  <dt>apple</dt><dd>vitamin</dd>
  <dt>coconut</dt><dd>vitamin</dd>
</dl>

：

dt { float: left; width: 80px; }

テーブル

<table>
<tbody>
<tr>
  <td class="left">fig</td>
  <td>vitamin</td>
</tr>
  <td>apple</td>
  <td>vitamin</td>
</tr>
  <td>coconut</td>
  <td>vitamin</td>
</tr>
</tbody>
</table>

：

table { border-collapse: collapse; }
td.left { width: 80px; }

テーブルが最も下位互換性ソリューション(帰IE5以前の)なのでもしばしば使用状況一部のもとではない。の理念のいわゆる セマンティック-ウェブ も遂に値付着が可能ですが、まこともしばしば場だけを選ぶと純度の意味"との下位互換性ので、一定額プラグマティズム(実利主義)のニーズを優先します。

とはいえませんが、ないと言っておられるのかん重要なのはこの経路に合います。

最後に、 常に 入DOCTYPE宣言ホームページ.での軍家からの操作モードを基準に準拠モード（euphemisms).例えば:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
...

他のヒント

あなたは見出しに左に浮いているdiv要素を使用することができます - これは、テーブルを使用したい、またはその厳密なレイアウトは、そのテーブルより多くの柔軟性を必要としないWebサイト上の2つの列の形に人気などであなたを制限します。

<div class="wrapper">
    <div style="float: left; width: 80px;">Banana</div>
    <div>Vitamin Awesome</div>
</div>

私は、外側のdivはその後<br clear="both" />と置き換えることができると思います。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top