为什么 padding 不适用于 option-elements 以及为什么 div 作为 select-element 的子元素并不酷？

Question

我正在尝试用带有数组的对象数组等来迭代对象数组。我非常接近实现我想要的目标，但无法想出任何关于如何实现目标的想法。

我有一个如下所示的类：

@Entity
@NoArgsConstructor
@Getter
@Setter
@EqualsAndHashCode
public class Category extends AbstractPersistable<Long> {

    @NotNull
    private String name;

    @JsonBackReference
    @ManyToOne(cascade = CascadeType.MERGE)
    @JoinColumn(name = "parentCategory")
    private Category parentCategory;

    @OneToMany(mappedBy = "parentCategory")
    private List<Category> subCategories = new ArrayList<>();

    @LazyCollection(LazyCollectionOption.FALSE)
    @OneToMany(mappedBy = "category")
    private List<Item> items = new ArrayList<>();
    
    public Category(String name) {
        
        this.name = name;
    }
    
    public Category(String name, Category parent) {
        
        this.name = name;
        
        this.parentCategory = parent;
    }
    
    public Integer categoryLevel;
    
    @Override
    public String toString() {
        
        return this.name;
    }

}

我将“主要”类别的列表发送到 thymeleaf：

@Query("select c from Category c where c.parentCategory is null")
List<Category> findMainCategories();
----------------
model.addAttribute("mainCategories", categoryRepository.findMainCategories());

现在，我设法使用这样的怪物代码访问子类别和子子类别等，但 NetBeans 是警告我使用 div 标签作为 select-tag 的子标签：

<div class="form-group mr-2">
    <label for="category">Category</label>
    <select class="form-control" id="category" name="category">
        <option>All</option>
        <div th:each="category : ${mainCategories}">
            <option class="optionGroup"  th:text="${category.name}" th:value="${category.id}"></option>
            <div th:each="subCategory1 : ${category.subCategories}">
                <option class="optionChild1" th:text="${subCategory1.name}" th:value="${subCategory1.id}"></option>
                <div th:each="subCategory2 : ${subCategory1.subCategories}">
                    <option class="optionChild2" th:text="${subCategory2.name}" th:value="${subCategory2.id}"></option>
                    <div th:each="subCategory3 : ${subCategory2.subCategories}">
                        <option class="optionChild3" th:text="${subCategory3.name}" th:value="${subCategory3.id}"></option>
                        <div th:each="subCategory4 : ${subCategory3.subCategories}">
                            <option class="optionChild4" th:text="${subCategory4.name}" th:value="${subCategory4.id}"></option>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </select>
</div>

上面看到的 css 类（otionGroup 和 optionChild1..2...3..4）用于格式化字体，但不用于添加填充。 css 如下所示：

.optionGroup {
    font-weight: bold;
    font-style: italic;
}

.optionChild1 {
    padding-left: 15px !important;
}

.optionChild2 {
    padding-left:  30px !important;
}

.optionChild3 {
    padding-left:  45px !important;
}

.optionChild4 {
    padding-left:  60px !important;
}

数据库中的类别为：

浏览器中的结果如下所示：

所以我的主要问题是填充，因为现在它就这样了没有对正确的东西进行分组，这是一个可怕的用户界面。另外，如果有一种“正确”的方法来迭代这种数据集，我会很高兴学习！

诗。我没有使用 optgroup-tag 因为我也需要“组”可供选择。

先感谢您！