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

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

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，并且两者都被浮动。如果您从 中删除 block 的类span，它应该可以解决问题。

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

于 2012-06-05T02:17:52.587 回答