Question

我正在努力设计一个简单的有序列表来查看：

HTML必须是标准的html，如：

<ol>
    <li>asdf asdf</li>
    <li>asdfasdfasdf</li>
    <li>asdfasdf</li>
    <li>asdf...</li>
</ol>

我已经尝试了一些不同的方式使用list-style-position：inside，text-indent等...但我似乎无法让它变得完美。我需要在背景颜色中包含数字，并在包装时正确排列文本。并且还希望数字和文本之间有一些空格。它甚至可能吗？

Answer 1

这应该这样做，这个想法是将计数器显示为绝对定位的伪内容。

<强> JsFiddle Example

＆＃13;

ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
ol li {
    counter-increment: step-counter;
    background: lightgreen;
    padding: 20px 20px 20px 50px;
    margin-bottom: 8px;
    position: relative;
}
ol li:before {
    content: counter(step-counter) ".";
    position: absolute;
    left: 20px;
}

＆＃13;

<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>

＆＃13;

Answer 2

你必须像这样设计：

Css：

        ifstream fin;
        fin.open("\\\\SCS\\C\\Sorter Software\\Data\\TocStatus.dat"); // open a file    | std::ios::binary | std::ios::app
        if (fin.is_open())
        {
            char buf[512];
            fin.getline(buf, 512);
            char *theString = TrimCString(buf);
            if (strlen(theString))
                mbstowcs_s(NULL, V_BSTR(&tagValues[TAGS_MOTIONTL_STATUS_TOC].tvValue), strlen(theString)*2, theString, strlen(theString));

            if (use_window)
                ListView_SetItemText(TheListView, TAGS_MOTIONTL_STATUS_TOC-1, 1, theString);
            if (tagValues[TAGS_MOTIONTL_STATUS_TOC].tvState.tsQuality == OPC_QUALITY_BAD)
            {
                tagValues[TAGS_MOTIONTL_STATUS_TOC].tvState.tsQuality = OPC_QUALITY_GOOD;
                SetListViewItem(TAGS_MOTIONTL_STATUS_TOC, tagActivationFlags[TAGS_MOTIONTL_STATUS_TOC]);
            }
            if (tagValues[TAGS_MOTIONTL_STATUS_TOC].tvState.tsQuality != OPC_QUALITY_GOOD)
            {
                tagValues[TAGS_MOTIONTL_STATUS_TOC].tvState.tsQuality = OPC_QUALITY_GOOD;
                SetListViewItem(TAGS_MOTIONTL_STATUS_TOC, 1);
            }
        }
        else
        {
            V_BSTR(&tagValues[TAGS_MOTIONTL_STATUS_TOC].tvValue) = SysAllocString(L"UNKNOWN ERROR9                                                                                      ");
            mbstowcs_s(NULL, V_BSTR(&tagValues[TAGS_MOTIONTL_STATUS_TOCLOADED].tvValue), strlen(std::strerror(errno)) * 2, std::strerror(errno), strlen(std::strerror(errno)));
            tagValues[TAGS_MOTIONTL_STATUS_TOC].tvState.tsQuality = OPC_QUALITY_GOOD;
            if (use_window)
            {
                ListView_SetItemText(TheListView, TAGS_MOTIONTL_STATUS_TOC-1, 1, "UNKNOWN");
                SetListViewItem(TAGS_MOTIONTL_STATUS_TOC, 2);
            }
            UpdateConnStatus(false);
        }
        fin.close();

HTML：

ol{
    list-style-position: inside;
    padding:0; 
    margin:0;
}
li{
    margin:0 0 5px;
    border:2px solid white;        
    background:yellow;
    padding:20px;
    width:500px;
    height:30px;
}

http://jsfiddle.net/u4rqyo4L/3/

如何自定义无序列表位置？

2 个答案: