Question

<ol style="float:left;display:inline">
 <li style="float:left;display:inline">
   <label style="position:relative">
     <div  style="position:absolute;left:2px;background-image:someimage.png"/>
     <input type="radio"/>
           </label>
         </li>

 <li style="float:left;display:inline">
   <label style="position:relative">
     <div  style="position:absolute;left:2px;background-image:someimage.png"/>
       <input type="radio"/>
           </label>
        </li>
</ol>

在此代码中，我试图隐藏图像后面的单选按钮（在div标签中指定）。但这不起作用。我不想直接使用img标签指定图像（它完美地工作）。有任何解决方法吗？

Answer 1

如果您的目标是隐藏单选按钮，为什么不执行类似

的操作

<input type="radio" class="hidden"/>

input.hidden {
  display: none;
}

Answer 2

您需要移动父DIV之外的单选按钮。我想你想要这样的东西：

<ol>
  <li style='position:relative'>
    <input type='radio' style='position:absolute;left:0;top:0;z-index:0' />
    <div style='position:absolute;left:0;top:0;
                z-index:1;background-image:url("someimage.png")'>
      Foo          
    </div>
  </li>
</ol>

其他选项是@ AgentConundrum的display:none解决方案（不允许您点击按钮，并会折叠空间）或使用visibility:hidden（仍然不允许您点击按钮，但是会留下按钮所在的空白区域。

如果你试图替换单选按钮的外观，有很多快速的解决方案，但他们使用Javascript。

当我在谈论Javascript时，你也没有单选按钮，只需点击你的div，它可以被编码为单选按钮。

一般来说，隐藏做某些事物的表单元素可能不是一个好设计，因为每次你想要使用它们时，你都必须解决与它们的交互问题。只需完全省略它们并使用Javascript，或者改进您的设计以合并它们。

有序列表问题

2 个答案: