Question

我在CSS中创建了一个样式化按钮，它将圆角应用于第一个和最后一个元素。

看起来像这样：

现在的问题是，根据具体情况，我需要使用角度ng-if插入新按钮。当我这样做时，新的按钮弄乱了第一个和最后一个圆角。例如，以上是同一图像，在满足特定条件时添加了新按钮：

请注意，在上面的图片中添加带有ng-if的X和图钉图标会导致舍入问题。

如何更改代码，以便在添加或删除动态按钮时，圆形的第一个和最后一个孩子不会搞砸？ 我不希望根据ng-if创建两个不同的列表。我宁愿保留列表中的元素ng-if'd

参考HTML代码：

<div id="flyoutmenu" style="float:left">
                <ul>
                    <li>
                        <a href="" ng-click="sliderChanged(1)"> <i class="ion-plus-circled"></i></a>
                    </li>
                    <li>
                        <a href="" ng-click="sliderChanged(-1)"> <i class="ion-minus-circled"></i></a>
                    </li>
                    <span ng-if="isDragabillyOn">
                        <li>
                            <a href="" ng-click="hideMonitor(monitor.Monitor.Id)"> <i class="ion-close-circled"></i></a>
                        </li>
                        <li>
                            <a href="" ng-click="toggleStamp()"> <i class="ion-pin"></i></a>
                        </li>
                    </span>
                </ul>
            </div>

CSS：

#flyoutmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: white;
    z-index: 99;
    font-size: 0.7em;
    font-family: sans-serif;
    text-transform: uppercase;
}

#flyoutmenu ul li a i {
    font-size: 2.5em;
    font-family: sans-serif;
    text-transform: uppercase;
}

#flyoutmenu li {
    display: inline-block;
    margin-bottom: .2em;
    padding: 0.7em;
    margin-right: 4px;
    line-height: 100%;
}

#flyoutmenu li:first-child {
    /*background: rgba(192, 57, 43, 0.7);*/
    background: rgba(108, 122, 137, 0.7);
    -webkit-border-radius: 5px 0 0 5px;
}

#flyoutmenu li:only-child {
    /*background: rgba(192, 57, 43, 0.7);*/
    background: rgba(108, 122, 137, 0.7);
    -webkit-border-radius: 5px 5px 5px 5px;
}

#flyoutmenu li:last-child {
    -webkit-border-radius: 0 5px 5px 0;
}


/* make sure this is after last-child */

#flyoutmenu li:only-child {

    background: rgba(108, 122, 137, 0.7);
    -webkit-border-radius: 5px 5px 5px 5px;
}

#flyoutmenu li:nth-child(n+2) {
    background: rgba(108, 122, 137, 0.7);
    z-index: -1;
}

Answer 1

删除范围，以便所有列表项具有相同的父项。然后将ng-if添加到列表项目本身。

                    <li ng-if="isDragabillyOn">
                        <a href="" ng-click="hideMonitor(monitor.Monitor.Id)"> <i class="ion-close-circled"></i></a>
                    </li>
                    <li ng-if="isDragabillyOn">
                        <a href="" ng-click="toggleStamp()"> <i class="ion-pin"></i></a>
                    </li>

通过第一个孩子和最后一个孩子设置样式按钮以及动态插入问题

1 个答案: