0

Chrome の OL 番号付けで奇妙な動作が発生しています。これが私のマークアップです。

<ol>
  <li>
    <div class="block left">
      <span class="block">Main Title<span class="alert">!</span></span>
      <input type='text' name='title-1' />
    </div>

    <div class="block left">
      <span class="block">Subtitle<span class="alert">!</span></span>
      <input type='text' name='title-2' />
   </div>

    <div class="block left">
      <span class="block">Add Image<span class="alert">!</span></span>
      <input type='file' name='image' size='30' />
    </div>
  </li> 
<ol>

使用されるクラスは次のとおりです。 

    .block { display:block; }  
    .left { float:left; }  
    .alert { color:red; }

私が抱えている問題は、OL の番号を LI のコンテンツの LEFT に表示する必要があることですが、Chrome はある種の float プロパティを数字に関連付けて、右側に表示するようです。

誰でもこの問題について何か支援を提供できますか? 前もって感謝します。

4

2 に答える 2

3 
ol li { margin-left: 60px; list-style-type: decimal; }

数字が見えるようになります。

li-elements 内のタグをラップして、<div class="wrap">この css を適用します。

.wrap { display: inline-block; position: relative; top: 12px; }

あなたの問題を解決します --> http://jsfiddle.net/GpfYk/2/

position: relative; top: 12px;ポジションが良くなります。

于 2012-06-05T02:24:38.320 に答える
0

問題は、span内に「ブロック」のクラスを持つ がliあり、両方がフローティングされていることです。からブロックのクラスを削除するとspan、問題が解決するはずです。

または、要素をインラインのままにしたい場合は、display: inline-block次の例のように、「左」クラスを設定して削除し、それらをフロートさせてみてください: http://jsfiddle.net/jglovier/zshPr/

于 2012-06-05T02:17:52.587 に答える