Question

这是问题所在。我的复选框是默认复选框，我通过使用-webkit-appearance: none;删除默认样式进行了更改。但是之后发生了什么，您可以在小提琴中看到。

为什么，它不再对齐了。尝试使用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;
}

Answer 2

添加vertical-align: middle;进行输入。

.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;
vertical-align: middle;
}

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 3

尝试这样的事情：

.dropdown-items:hover {
background-color: #87CEFA;
display: flex;
align-items: center;
align-content: center;

}

但是我认为您应该向左对齐，因为元素具有不同数量的字母，因此它们永远不会对齐

为什么更改复选框后元素未对齐？

3 个答案: