logo标签列表

CSS用于显示带有复选框的缩进有序列表。

htmlcsshtml-lists
3

我不确定这是否可能，但我正在尝试设置一个带有复选框的有序列表，类似于：

  1. 我希望此处有一个复选框位于项目编号左侧，并换行到句子的第一个单词，而不是项目编号。
  2. 与项目1相同，想要一个复选框位于项目编号左侧，并换行到句子的第一个单词。

我已经使用this question解决了缩进问题，但无法让复选框显示在与<li>相同的行上。 有没有办法做到这一点？

这里是我一直在研究的jsFiddle。

从这里开始：http://www.alistapart.com/articles/prettyaccessibleforms - Diodeus - James MacFarlane
你的HTML无效。单选按钮不能出现在<ol>和<li>之间。 - Diodeus - James MacFarlane
@Diodeus - 谢谢你提供的链接。它们不是单选按钮：<input type="checkbox" />。 - AJ.
3个回答
6

http://jsfiddle.net/9v97V/2/

您可以像这样做。将输入放在列表项内，然后绝对定位，使其出现在列表项之前。

最相关的CSS：

li input
{
    position: absolute;
    margin-left: -40px;
    margin-top: 5px;
}
1

我基于你的jsFiddle创建了一个新的：http://jsfiddle.net/3VESY/1/

基本上，我将文本放在一个span（也可以是div）中，并在输入框上浮动。 span具有左填充以创建缩进。 希望这就是你需要的？

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

ol li span {
    display:block;
    padding-left:30px;
}
input
{
    float:left;
}

编辑更新的fiddle: http://jsfiddle.net/3VESY/1/，以添加数字

谢谢，但我还需要列表项的编号/字母。 - AJ.
0
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            form{
                border: 2px solid #f1f1f1;
                text-align: left;
                }
    
            ol{
                margin-left:40%; 
                font-weight:bold;   
            }
        </style>
    </head>
    
    <body>
    
        <div class="container">
            <form action="/action.php">
                <ol type="A" style="color: red" >
                    <li><p >CSE</p></li>
                    <ol type="i" style="margin-left:-13%; color: blue">
                        <li>
                            <input type="checkbox" id="cb1" name="op1">
                            <label for="cb1"> Artificial Intelligence</label>
                        </li><br>
                        <li>
                            <input type="checkbox" id="cb2" name="op2">
                            <label for="cb2">Machine Learning</label>
                        </li>   
                    </ol><br>
                    <li><p>ECE</p></li>
                    <ol type="A" style="margin-left:-13%; color: blue">
                        <li>
                            <input type="checkbox" id="cb3" name="op3">
                            <label for="cb3">Embedded Systems</label>
                        </li><br>
                        <li>
                            <input type="checkbox" id="cb4" name="op4">
                            <label for="cb4">IOT</label>
                        </li><br>
                    </ol>
                </ol>       
            </form>
        </div>
        
    </body>
</html>
我认为现在应该已经清楚了，考虑到上面的答案，如果还不明白，只需将我的代码复制粘贴到一个 .html 文件中并运行它。您将获得基本插图的外观和感觉，然后根据需要进行样式更改。 - Han Arahan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接