3

私のクロムは最新の 31.0.1650.48 バージョンです。

今日、float:left が正しく機能していないように見えることに気付きました。(IE と FF は問題ありません。以前は Chrome も問題ありませんでした。)

HTMLは次のようなものです：

<div class="listWrapper collapsed clearfix">
  <ul>
    <li><a href="" title="aa"></a></li>
    <li><a href="" title ="bb"></a></li>
    <li><a href="" title ="cc"></a></li>
  </ul>
  <div class="ui-checkbox" role="checkbox" tabindex="0" style="display:inline-block;"></div>
</div>

CSSは次のようなものです：

.ui-checkbox {
   background: url("../images/elements/form.png") no-repeat -183px -331px;
   width: 37px;
   height: 31px;
   float: left; 
}

今起こったことは、内側のチェックボックスdivが最初にulとliの隣にフロートできないことです。しかし、そのdivを右クリックすると->要素の検査->「float：left」のチェックを外してから、再度チェックを入れると、正しくなります。

誰がこれについて何か考えがありますか?

追加：

ulは float:left で、各liには実際には 1 つの背景画像と float:left があります。その場合、3 つの (li) 画像が 1 行にまとめて表示され、次の div (チェックボックス形状) が同じ行に表示されます。ただし、float:left css のチェックを外して再度チェックしない限り、divは次の行に表示されます。

もう一度追加

2 つの結果のスクリーン ショットを参照してください。 ここに画像の説明を入力

全体の div は float:right で、内側の ul、li、および div は float left です。しかし、最初の緑色の「チェックボックスのような」div は、これらすべての li の下に表示されます。float:left のチェックを外して付け直すとOKになります。

ありがとう！

4

3 に答える 3

1

widthに明示的に指定したかどうかを確認してください<ul>。そして、<ul>と のwidthscheckbox divの追加がdiv listWrapper collapsedの幅以下かどうかを確認します。マザーdivに幅がない場合は問題ありません。これを試してください

.ui-checkbox {
   background-color:green;
   width: 37px;
   height: 31px;
   float: left; 
}

ul{
    float: left;
    width:50px;
}

このフィドルをチェック

または更新Fiddle。

于 2013-11-14T07:20:22.890 に答える