Question

我有以下HTML标记，用于显示产品类别列表

HTML：

<ul data-bind="foreach: Combos" style="margin: 0; padding: 0; color: White;">
    <li id="comboItem" style="list-style-type: none;">
        <table style="width: 100%; height: 100%; margin-bottom: 10px;" data-bind="click: $root.selectCombo">
            <tr>
                <td style="height: 30px; background-color: #0089d1;">
                    <table style="width: 100%;">
                        <tr>
                            <td style="height: 25px; padding-left: 10px; font-weight: bold; background-color: black;
                                color: #0089d1; margin: 1px; width: 70%;">
                                <span data-bind="text: Description" />
                            </td>
                            <td style="color: Black; width: 30%; text-align: center;">
                                <span data-bind="text: formatCurrency(Price)" style="font-size: 13px; white-space: nowrap;
                                    font-weight: bold;" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </li>
</ul>

创建以下输出：

enter image description here

现在我需要添加一个与包含产品描述的td元素略微重叠的图像，以创建以下效果：

enter image description here

我真的很感激有关如何做到这一点的任何提示

Answer 1

我改变了你的代码！在JSFIDDLE

上看到它

<强> CSS：

li{
    padding-bottom:25px;
}
table{
    border-collapse:collapse;
}
table tr img{
    position:absolute;
    width:50px;
    height:50px;
    margin-left:-10px;
    margin-top:-10px;
}

<强> HTML：

<li id="comboItem" style="list-style-type: none;">
        <table style="width: 100%; height: 100%; margin-bottom: 10px;" data-bind="click: $root.selectCombo">
            <tr>

                <td style="height: 30px; background-color: #0089d1;">
                    <table style="width: 100%;">
                        <tr>
                            <img src='https://cdn3.iconfinder.com/data/icons/social-circle/512/social_4-32.png' />
                            <td style="height: 25px; padding-left: 10px; font-weight: bold; background-color: black;
                                color: #0089d1; margin: 1px; width: 70%;">
                                <span data-bind="text: Description" />
                            </td>
                            <td style="color: Black; width: 30%; text-align: center;">
                                <span data-bind="text: formatCurrency(Price)" style="font-size: 13px; white-space: nowrap;
                                    font-weight: bold;" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </li>

Answer 2

这是使用纯css的解决方案（没有图像或标记更改）

li#comboItem{
    position:relative;
}
li#comboItem:before{
    position:absolute;
    content:"";
    width:50px;
    height:50px;
    border-radius:50%;
    background:#0089d1;
    top:-5px;
    left:-5px;
}
li#comboItem:after{
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ffffff;
    top: 9px;
    left: 15px;
}

JS小提琴 - http://jsfiddle.net/4k7Fa/

Answer 3

从根本上<打击>清理更改标记：

<ul data-bind="foreach: Combos" style="margin: 0; padding: 0; color: White;" id="comboItems">
    <li>        
        <span data-bind="text: Description" class="description">Description</span>
        <span data-bind="text: formatCurrency(Price)" class="price">R 38.99</span>
    </li>
    <li>        
        <span data-bind="text: Description" class="description">Description</span>
        <span data-bind="text: formatCurrency(Price)" class="price">R 38.99</span>
    </li>
</ul>

使用以下CSS（来自@ rub0123的圈子）：

#comboItems
{
    list-style-type: none;
}

#comboItems li
{
    height: 30px;
    margin:30px 0;
    position:relative;
    background-color:#000;
    line-height:30px;
    padding-left:50px;
    border-top: solid 3px #0089d1 ;
    border-bottom: solid 3px #0089d1 ;
    margin-left:5px;
    color:#0089d1;
    font-weight:bold;       
    clear:both;
}

li .price
{
    display:block;
    background-color:#0089d1;
    color:#000;
    width:30%;
    text-align:center;
    float:right;


}


#comboItems>li:before{
    position:absolute;
    content:"";
    width:50px;
    height:50px;
    border-radius:50%;
    background:#0089d1;
    top:-11px;
    left:-10px;
}
#comboItems>li:after{
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ffffff;
    top: 3px;
    left: 10px;
}

Demo

您可能希望使用top中的#comboItems>li:before值（圆圈）＆amp; #comboItems>li:after（箭头）以更好地定位。

通过HTML轻微覆盖图像

3 个答案: