css - Chrome 中的 OL 编号未左对齐，出现在右侧

Question

我在 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 内容的左侧，但 Chrome 似乎将某种浮点属性赋予数字，使其出现在右侧。

任何人都可以就此事提供任何帮助吗？提前致谢。

Answer 1

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

将使数字可见。

用 <div class="wrap"> 将标签包裹在 li 元素中并将此 css 应用于它:

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

将解决您的问题 --> http://jsfiddle.net/GpfYk/2/

position: relative; top: 12px;使位置更好。