html - 为什么更改复选框后元素不对齐？

Question

问题来了。我的复选框是默认复选框，我通过删除默认样式来更改它:-webkit-appearance: none;。但是之后发生了什么，你可以在 fiddle 中看到。

不知何故，它不再对齐了。尝试使用 vertical-align: middle 或 text-align:center，但没有帮助。

为什么会发生这种情况以及如何解决？

.more-dropdown-price {
    float: right;
    vertical-align: middle;
}

.more-dropdown-checkbox {
    height: 18px;
    width: 18px;
    border: 1px solid #92aabb;
    -webkit-appearance: none;
    display: inline-block;
}

input[type=checkbox]:checked {
    background-color: #3180D8;
}


.dropdown-items:hover {
    background-color: #87CEFA;
}

 <div class="more-dropdown">
                <div class="dropdown-items">
                    <input type="checkbox" class="more-dropdown-checkbox"> Foo <span class="more-dropdown-price"> 155$ </span>
                </div>
                <div class="dropdown-items">
                    <input type="checkbox" class="more-dropdown-checkbox"> Bar <span class="more-dropdown-price"> 15$ </span>
                </div>

Answer 1

我建议将以下内容添加到您的 .dropdown-item 类中:

.dropdown-item{
  display: flex;
  align-items: center;
}