为什么这个组合框的底部有一行？

Question

我已经尝试了所有方法来尝试删除它，它看起来既不像分割窗格也不像分隔符。

添加了一些填充以更好地显示它：

我所有的代码都是添加了元素的 ComboBox<String>，无需显示。至于css，我有这个：

.combo-box {
    -fx-focus-color: transparent;
    -fx-background-insets: -1, -1, -1, -1;
}

.combo-box .list-cell {
    -fx-text-fill: white;
}

.combo-box-base .arrow-button {
    -fx-background-color: transparent;
}

.combo-box-base .arrow {
    -fx-shape: "M8.124,13.625l4.125-3.375v2.889l-4.125,3.86L4,13.139V10.25L8.124,13.625z";
    -fx-background-color: white;
}

.combo-box-popup .list-view {
    -fx-effect: null;
}

和

.combo-box {
    -fx-background-color: #2B545E;
    -fx-background-radius: 0;
}

.combo-box-popup .list-view {
    -fx-background-color: #2B545E;
}

.combo-box-popup .list-view .list-cell:filled {
    -fx-background-color: #2B545E;
}

.combo-box-popup .list-view .list-cell:filled:hover {
    -fx-background-color: #2E5A66;
}

.combo-box-popup .list-view .list-cell:filled:selected {
    -fx-background-color: #346673;
}

使用 Application.STYLESHEET_CASPIAN.

Answer 1

问题是这种风格：.combo-box-base .list-view .cell

通过指定更大的listview弹窗高度，很容易看出不是一行，而是listview未填充的内容：

.combo-box-popup .list-view {
    -fx-pref-height:200;
}

那么您的组合框将如下所示：

因此解决方案是通过添加以下样式为该区域着色：

.combo-box-base .list-view .cell  {
    -fx-background-color: #2B545E; 
}

你会得到这个：

为什么这个组合框的底部有一行？

Why is there a line at the bottom of this combo box?

css

listview

combobox

javafx

javafx-8