html - 如何相对于 CSS 中的单独元素定位一个元素

Question

我正在尝试制作一组​​按钮，每个按钮下方都有一个复选标记。我想弄清楚如何使每个按钮下方的每个复选标记居中。

这是显示代码的 fiddle 链接:https://jsfiddle.net/Hydropotamus/sn5xxLdq/2/

我目前的思路是我必须像这样在我的复选标记类中使用相对位置:

.checkmark{
    position: relative;
    width: 8px;
    height: 20px;
    border: solid #bdbdbd;
    border-width: 0 3px 3px 0;
    padding-left:0px;
    margin-left:13px;
    transform: rotate(45deg);
}

但是，我不确定如何使用相对位置来正确定位复选标记。

如有任何建议或提示，我们将不胜感激!

Answer 1

将每个按钮分组为它们自己容器中的复选标记是最简单的方法。

body {
    margin:0;
}
.fixedBar {
    position: fixed;
    left:0%;
    top: 0%;
    width:100%;
    padding:15px 15px;
    background-color:#003c0c;
    z-index: 6;
}
.moving-background {
    padding-top:70px;
    padding-bottom:20px;
    padding-right:20px;
    padding-left:20px;
    width:100%;
    background-color:#003c0c;
}
.checkmark {
    position: relative;
    width: 8px;
    height: 20px;
    border: solid #bdbdbd;
    border-width: 0 3px 3px 0;
    padding-left:0px;
    margin-left:13px;
    transform: rotate(45deg);
    margin: auto;
}
.container-buttons {
    padding-right:0px;
    padding-left:0px;
    margin-right:0px;
    margin-left:0px;
}
.button_wrap {
    display: inline-block;

}

<div class="fixedBar">
    <div>
        <input placeholder="Search for..." style="background-color:#fff" class="form-control" type="text" ng-model="searchValue" ng-change="onChange(searchValue)">
    </div>
</div>
</br>
<div class="moving-background">
    <div class="container-buttons">
        <div class="button_wrap">
            <button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('all')">All</button>
            <div class="checkmark"></div>
        </div>
        <div class="button_wrap">
            <button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('room')">Room</button>
            <div class="checkmark"></div>
        </div>
        <div class="button_wrap">
            <button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('floor')">Floor</button>
            <div class="checkmark"></div>
        </div>
        <div class="button_wrap">
            <button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('building')">Building</button>
            <div class="checkmark"></div>
        </div>
    </div>