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的LEFT内容中，但Chrome似乎将某种浮动属性归因于数字，使其显示在右侧。 / p>

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

Answer 1

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

会使数字可见。

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

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

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

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

Answer 2

问题是span内有一个li类，其中包含一个“块”类，并且两者都在浮动。如果您从span中删除了阻止类，则应该解决问题。

或者，如果您希望将元素保持为内联，请尝试将其设置为display: inline-block并删除“left”类以将其浮动，如下例所示：http://jsfiddle.net/jglovier/zshPr/

镀铬的OL编号不是左对齐，出现在右侧

2 个答案: