0

imgタグについて簡単な質問があります。次のようなhtmlマークアップがあります

<header>
   <img src='test.jpg'/>
   <ul>
      <li> item1 1</li>
      <li> item1 2</li>
      <li> item1 3</li>
      <li> item1 4</li>
   </ul>
</header>

ヘッダーの左側に画像を表示し、ヘッダーの右側に ul リンクを表示して、両方が水平方向に整列するようにします。

Desired result

image                                           items 1 items 2 item 3 item4
other stuff….

It works in FF but not chrome. Chrome is like
image                                           
other stuffs….                                 items 1 items 2 item 3 item4

画像をブロック要素として扱います。

私のCSS

* {
  margin: 0;
  padding: 0;
}

header {
    margin: .2em;
}

header ul {
    float: right;
}

header li {
  list-style: none;
  font: bold .8em arial;
  float: left;
  margin: .3em;
  padding: 1.3em; 
   background-color: #3D3D3D;
}

この奇妙な問題について誰か助けてもらえますか? どうもありがとう！

4

3 に答える 3

1

私はあなたのコードをjsfiddleに入れました：

http://jsfiddle.net/eVDQL/

私にとっては、説明どおりに機能しているようです。

何が機能していないかについて、もう少し情報を提供できるかもしれません。

あなたの質問に答えを追加するために、このjsfiddleに別の作業バージョンを追加しました:

http://jsfiddle.net/eVDQL/1/

フロートをクリアできなかっただけかもしれません。マークアップに次のブロック コンテナーがない場合は、

<br />そして追加 clear:right;

brのCSSセレクターに

于 2013-08-16T17:52:39.783 に答える
1

画像やその他のものを div セットにグループ化して、幅を 50% に設定し、左にフロートさせます。UL を別の div に設定し、50% に設定して左にもフロートします。それはうまくいくはずです。

于 2013-08-16T17:50:42.740 に答える
1

Chromeは実際にそれを正しく行っています。フローティング要素はレイアウト フローから削除されるため、画像が最初に表示され、次にリストが新しい行から始まり、右にフローティングされます。他のものは、必要に応じてリストの左側に流れます。

目的の結果を得るには、浮動要素をマークアップの最初に配置します。

<header>
   <ul>
      <li> item1 1</li>
      <li> item1 2</li>
      <li> item1 3</li>
      <li> item1 4</li>
   </ul>
   <img src='test.jpg'>
</header>

リストは最初にレイアウト フローから削除されるため、クリアされるまで後続の要素がその周りを流れます。

于 2013-08-16T17:55:42.940 に答える