[发明专利]隶属关系展示方法、装置、电子设备和存储介质

说明书

本申请实施例提供的隶属关系展示方法、装置、电子设备和存储介质，通过CSS语言构建用于展示父级输入框和子级输入框的隶属关系的折线，并将该构建好的折线设置在父级输入框和子级输入框的相应位置上，从而可以实现对父级输入框和子级输入框的隶属关系的展示。当父级输入框或子级输入框的行高变化时，通过修改CSS语言的代码即可修改折线的尺寸，以使该折线与父级输入框及子级输入框匹配。

技术领域

本申请涉及网页技术领域，具体而言，涉及一种隶属关系展示方法、装置、电子设备和存储介质。

背景技术

随着网页技术的不断发展，网页应用的使用场景越来越复杂。例如通过网页对用户可以在网页的输入框中输入的含有隶属关系的数据进行展示。网页在提供相应的展示界面时，需要展示数据输入框之间的隶属关系，一般来说是使用折线表示输入框之间的关系。

目前常见的一种方式是使用图片的方式展示用于表示输入框之间的关系的折线，但由于不同的隶属关系所需要使用的折线是不同的，因此需要准备较多种不同的图片，同时，若使用图片的形式展示折线，则输入框的行高无法修改，若修改了输入框的行高，则需要重新制作折线图片。

发明内容

有鉴于此，本申请的目的在于提供隶属关系展示方法、装置、电子设备和存储介质。

第一方面，实施例提供一种隶属关系展示方法，应用于电子设备，所述方法包括：

设置至少一个父级输入框及与所述父级输入框并列设置的至少一个子级输入框，其中，所述父级输入框的宽度大于所述子级输入框的宽度，且所述父级输入框的一端与所述子级输入框的一端齐平；

通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，其中，所述折线的尺寸能够通过修改所述CSS语言进行修改；

将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端。

在可选的实施方式中，通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，包括：

通过CSS语言构建L型折线，其中，所述L型折线的第一线段的长度小于所述父级输入框与所述子级输入框的宽度差，所述L型折线的第二线段的长度为子级输入框的行高及相邻两个子级输入框之间的间隙高度之和。

在可选的实施方式中，通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，包括：

通过CSS语言构建L型折线，其中，所述L型折线的第一线段的长度为所述父级输入框与所述子级输入框的宽度差的一半，所述L型折线的第二线段的长度为子级输入框的行高及相邻两个子级输入框之间的间隙高度之和。

在可选的实施方式中，将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端，包括：

将所述L型折线的一端连接各所述子级输入框的一端，所述L型折线的另一端连接另一折线或所述父级输入框。

在可选的实施方式中，所述子级输入框包括相互平行的第一边及第二边，其中，所述第一边位于所述第二边与所述父级输入框之间，所述将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端，包括：

根据所述子级输入框的位置将所述L型折线设置在所述子级输入框未与所述父级输入框齐平的一端，且所述L型折线的第一线段位于所述子级输入框的第二边所在的直线上；

将所述L型折线沿所述子级输入框行高所在的方向朝向所述父级输入框移动，以使所述第一线段所在直线位于所述子级输入框的第一边所在直线及第二边所在直线之间。

在可选的实施方式中，所述将所述L型折线沿所述子级输入框行高所在的方向朝向所述父级输入框移动，包括：