CN111104160B - 隶属关系展示方法、装置、电子设备和存储介质 - Google Patents

Abstract

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

Description

隶属关系展示方法、装置、电子设备和存储介质

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

将所述L型折线沿所述子级输入框行高所在的方向朝向所述父级输入框移动半个所述子级输入框的行高的距离。

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

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

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

折线位置确定模块，用于将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端。

在可选的实施方式中，所述折线构建模块具体用于：

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

第三方面，实施例提供一种电子设备，包括处理器及存储有计算机指令的非易失性存储器，所述计算机指令被所述处理器执行时，所述电子设备执行前述实施方式中任意一项所述的隶属关系展示方法。

第四方面，实施例提供一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序被执行时实现前述实施方式中任意一项所述的隶属关系展示方法。

本申请的有益效果：

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

为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为背景技术提供的一种使用图片进行隶属关系展示的示意图；

图2为本申请实施例提供的电子设备的结构示意图；

图3为本申请实施例提供的应用于图2中电子设备的隶属关系展示方法的流程图；

图4为本申请实施例提供的父级输入框和子级输入框的示意图；

图5为申请实施例提供的L型折线的示意图；

图6为本申请实施例提供的图3中的步骤S330的子步骤流程图；

图7为本申请实施例的图6中子步骤S3301及子步骤S3302提供L型折线设置示意图；

图8为本申请实施例提供的隶属关系展示装置的功能模块图。

主要元件符号说明：100-电子设备；110-隶属关系展示装置；120-存储器；130-处理器；1101-输入框设置模块；1102-折线构建模块；1103-折线位置确定模块；21-父级输入框；22-子级输入框；211-父级输入框的第一端；212-父级输入框的第二端；221-子级输入框的第一端；222-子级输入框的第二端；223-第一边；224-第二边；231-第一线段；232-第二线段。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

请参照图1，图1为背景技术提供的一种使用图片进行隶属关系展示的示意图。在图1中，父级输入框是指root文件夹，子级输入框分别是CSS文件夹、Maine Automation文件夹以及test文件夹。

在图1中用于表示各个文件夹之间的隶属关系的折线是通过图片的形式展示的，不难发现，由于test文件夹是最后一个子级输入框，因此位于CSS文件夹前方的折线与位于test文件夹前方的折线是不同的。

因此，通过图片的方式展示隶属关系时，通常需要准备多种不同的图片，同时，图片形式的折线，若要修改折线的颜色，只能重做图片。在修改了子级输入框或父级输入框的行高之后，为了使折线的尺寸能够与行高对应，也需要重做图片，十分不便。

为了解决上述问题，发明人研究后提出了一种隶属关系展示方法，所述方法应用于电子设备100。

请参照图2，图2为本申请实施例提供的电子设备100的结构示意图。该电子设备100包括有处理器130、存储器120以及隶属关系展示装置110，所述存储器120与处理器130各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述隶属关系展示装置110包括至少一个可以软件或固件(firmware)的形式存储于所述存储器120中或固化在所述电子设备100的操作系统(Operating System，OS)中的软件功能模块。所述处理器130用于执行所述存储器120中存储的可执行模块，例如隶属关系展示装置110所包括的软件功能模块及计算机程序等。所述电子设备100可以是，但不限于，可穿戴设备、智能手机、平板电脑、个人数字助理等。

其中，所述存储器120可以是，但不限于，随机存取存储器(Random AccessMemory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(ProgrammableRead-Only Memory，PROM)，可擦除只读存储器(Erasable Programmable Read-OnlyMemory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-OnlyMemory，EEPROM)等。其中，存储器120用于存储程序，所述处理器130在接收到执行指令后，执行所述程序。

所述处理器130可能是一种集成电路芯片，具有信号的处理能力。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

请参照图3，图3为本申请实施例提供的应用于图2中电子设备100的隶属关系展示方法的流程图。在本实施例中，所述方法包括以下步骤：

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

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

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

请参照图4，图4为本申请实施例提供的父级输入框21和子级输入框22的示意图。如图4所示，父级输入框21与多个子级输入框22并列设置，父级输入框21位于子级输入框22的上方，且父级输入框21的宽度大于子级输入框22的宽度，其中，父级输入框的第一端211与子级输入框的第一端221齐平，父级输入框的第二端212与子级输入框的第二端222未齐平，多个子级输入框22的两端均相互齐平，同时，相邻的两个子级输入框22或相邻的父级输入框21和子级输入框22之间还存在有间隙。用户能够在构建出的父级输入框21及子级输入框22输入或选择相应的具有隶属关系的数据。

在本实施例中，可以通过HTML(HyperText Markup Language，超文本标记语言)设置父级输入框21及子级输入框22，可选地，用于构建父级输入框21及子级输入框22的代码可以是：

<div className＝"home-container">

<h1>PATENT DEMO</h1>

<div className＝"demo-box">

<div className＝"row parent">

<Input placeholder＝"请填入父级内容"/>

</div>

<div className＝"row children">

<div className＝"item">

<Input placeholder＝"请输入子级内容"/>

</div>

</div>

<div className＝"row children">

<div className＝"item">

<Input placeholder＝"请输入子级内容"/>

</div>

</div>

<div className＝"row children">

<div className＝"item">

<Input placeholder＝"请输入子级内容"/>

</div>

</div>

</div>

</div>

使用HTML建立的父级输入框21和子级输入框22可以是文本框、下拉框或日期选择框等其他形式的输入框。

超文本标记语言是一种用于创建网页的标准标记语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(Head)、和“主体”部分(Body)，其中“Head”部提供关于网页的信息，“Body”部分提供网页的具体内容。

HTML是一种规范，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(例如文字如何处理，画面如何安排，图片如何显示等)。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。

可以理解的是，上文中的代码仅是对本申请实施例提供的用于构建父级输入框21及子级输入框22的HTML代码的一种举例说明，在本实施例的其他实施方式中，还可以通过其他形式的代码构建父级输入框21及子级输入框22。

请继续参照图4，在通过HTML构建了父级输入框21及子级输入框22之后，还需要通过CSS语言构建用于展示所述父级输入框21和所述子级输入框22的隶属关系的折线，以对父级输入框21和子级输入框22的样式进行设置，折线效果可以是图4中的虚线部分。

层叠样式表(Cascading Style Sheets，CSS)是一种用来表现HTML(超文本标记语言)或XML(可扩展标记语言)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS可以将样式定义在HTML的style属性中，也可以将其定义在HTML的Header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

在通过CSS语言构建的用于表示父级输入框21及子级输入框22的隶属关系的折线之后，还需要将构建出的折线设置在各子级输入框22与父级输入框21存在宽度差的一端，即子级输入框的第二端222，以将父级输入框21和子级输入框22相关联，从而实现隶属关系的展示。

在上述的隶属关系展示方法中，基于CSS语言构建用于展示父级输入框21及子级输入框22的隶属关系的折线，便于修改折线的尺寸。与背景技术中提到的使用图片的方式相比，本方法提供的隶属关系展示方法，在修改父级输入框21或子级输入框22的行高之后，无需重做图片，只需要通过修改CSS代码即可修改折线的尺寸，以使该折线与父级输入框21及子级输入框22匹配。同时，也可以通过修改CSS代码对折线的颜色进行修改。

与使用图片的方法相比，本申请提供的方法灵活性更高，可以方便地控制折线的位置、尺寸、颜色等。

下面对上述隶属关系展示方法进行进一步描述，可选地，在本实施例中，步骤S320具体包括：

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

在本实施例中，请参照图5，图5为申请实施例提供的L型折线的示意图。其中，L型折线的第一线段231小于父级输入框21与所述子级输入框22的宽度差，例如，当父级输入框21的宽度为300像素(px)，子级输入框22的宽度为270像素时，L型折线的第一线段231应当小于300与270的差，即L型折线的第一线段231应当小于30像素。

当父级输入框21的宽度为400像素，子级输入框22的宽度为360像素时，则L型线的第一线段231应当小于400与360的差，即L型折线的第一线段231应当小于40像素。

L型折线的第二线段232的长度为子级输入框22的行高及相邻的两个子级输入框22之间的间隙高度之和。例如，当子级输入框22的行高为32像素，相邻的两个子级输入框22的间隙高度之和为8像素时，则L型折线的第二线段232的长度即为40像素。

可选地，在本实施例的另一种实施方式中，步骤S320具体包括：

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

在本实施例中，继续参照图5。为了使L型折线能够更加美观地展示父级输入框21和子级输入框22之间的隶属关系，所述L型折线的第一线段231的长度可以设置为所述父级输入框21与所述子级输入框22的宽度差的一半，所述L型折线的第二线段232的长度依旧为子级输入框22的行高及相邻两个子级输入框22之间的间隙高度之和。

当父级输入框21的宽度为300像素，子级输入框22的宽度为276像素，子级输入框22的行高为32像素，相邻两个子级输入框22的间隙高度为8像素时，L型折线的第一线段231的长度应当为300与276的差的一半，即24的一半，因此，L型折线的第一线段231的长度为12像素。L型折线的第二线段232的长度则为子级输入框22的行高为32像素与相邻两个子级输入框22的间隙高度为8像素的和，即L型折线的第二线段232的长度为40像素。

可以理解的是，上述数值仅仅是对L型折线的第一线段231与L型折线的第二线段232的长度的举例说明，在本实施例的其他实施方式中，所述L型折线的第一线段231与L型折线的第二线段232的长度还可以是其他数值，在此不作具体限定。

在通过CSS语言构建出如上列举的L型折线之后，则将该L型折线设置在各子级输入框22与所述父级输入框21存在宽度差的一端。具体地，如图4所示，可以将L型折线的一端与各个子级输入框的第二端222连接，L型折线的另一端则与父级输入框21或是另一L型折线连接。

在本实施例中，当L型折线的第一线段231的长度设置为所述父级输入框21与所述子级输入框22的宽度差的一半时，L型折线的第二线段232正好位于宽度差形成的空白区域的正中间，看起来较为美观。

通过上述方式，便能通过L型折线表示父级输入框21与子级输入框22之间的隶属关系，并且在修改了父级输入框21或子级输入框22的行高之后，无需重做图片，只需要通过修改CSS代码即可修改折线的尺寸，以使该折线与父级输入框21及子级输入框22匹配。同时，也可以通过修改CSS代码对折线的颜色进行修改。与使用图片的方法相比，本申请提供的方法灵活性更高，可以方便地控制折线的位置、尺寸、颜色等。

具体地，下面对L型折线的具体设置方式进行详细说明，请参照图6，图6为本申请实施例提供的图3中的步骤S330的子步骤流程图。

在本实施例中，步骤S330包括以下子步骤：

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

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

请参照图7，图7为本申请实施例的图6中子步骤S3301及子步骤S3302提供L型折线设置示意图。在本实施例中，子级输入框22包括相互平行的第一边223及第二边224，其中，子级输入框22的第一边223位于第二边224及父级输入框21之间。

在设置L型折线时，首先需要根据子级输入框22的绝对位置确定L型折线的位置，将L型折线设置在所述子级输入框22未与所述父级输入框21齐平的一端，即子级输入框的第二端222，且L型折线的第一线段231位于子级输入框22的第二边224所在的直线上。

若父级输入框21与子级输入框22之间的间隙高度大于相邻两个子级输入框22之间的间隙高度，由于L型折线的第二线段232的长度为子级输入框22的行高与相邻两个子级输入框22的间隙高度之和，因此，当L型折线的第一线段231位于子级输入框22的第二边224所在的直线上时，L型折线的第二线段232无法与父级输入框21连接，因此，为了使L型折线的第二线段232能够与父级输入框21连接，还需要将L型折线沿着所述子级输入框22行高所在的方向并朝向所述父级输入框21移动一定的距离。

若父级输入框21与子级输入框22之间的间隙高度与相邻两个子级输入框22之间的间隙高度相等，则当L型折线的第一线段231位于子级输入框22的第二边224所在的直线上时，L型折线的第二线段232刚好与父级输入框21连接，但为了使展示效果更加美观，依旧可以将L型折线沿着所述子级输入框22行高所在的方向并朝向所述父级输入框21移动一定的距离。

可选地，在本实施例中，当移动后的L型折线的第二线段232与父级输入框21存在重合部分时，可以通过设置z-index让父级输入框21遮挡住L型折线的重合部分，即，将所述L型折线设置于底层。

可选地，在本实施例的其他实施方式中，子步骤S3302具体包括：

将所述L型折线沿所述子级输入框22行高所在的方向朝向所述父级输入框21移动半个所述子级输入框22的行高的距离。

继续参照图7，为了使隶属关系的展示效果更加美观，可以将L型折线的第一线段231设置在子级输入框22的第一边223和第二边224的正中间，即将L型折线沿着子级输入框22行高所在的方向朝向所述父级输入框21移动半个所述子级输入框22的行高的距离。例如，若子级输入框22的行高为32像素时，移动距离则可以是16像素。

当移动后的L型折线的第二线段232与父级输入框21存在重合部分时，依旧可以通过设置z-index让父级输入框21遮挡住L型折线的重合部分，即，将所述L型折线设置于底层。

可选地，在本实施例中，构建L型折线的CSS代码可以是：

可以理解的是，上述代码仅为本实施例对构建L型折线的CSS代码的一种举例说明，在本实施例的其他实施方式中，还可以通过其他的CSS代码构建L型折线，在此不作具体限定。

综上所述，在本申请实施例提供的隶属关系展示方法中，基于CSS语言构建用于展示父级输入框21及子级输入框22的隶属关系的折线，便于修改折线的尺寸。与背景技术中提到的使用图片的方式相比，本方法提供的隶属关系展示方法，在修改父级输入框21或子级输入框22的行高之后，无需重做图片，只需要通过修改CSS代码即可修改折线的尺寸，以使该折线与父级输入框21及子级输入框22匹配。同时，也可以通过修改CSS代码对折线的颜色进行修改。

与使用图片的方法相比，本申请提供的方法灵活性更高，可以方便地控制折线的位置、尺寸、颜色等。

请参照图8，图8为本申请实施例提供的隶属关系展示装置110的功能模块图。在本实施例中，所述装置应用于电子设备100，所述装置包括：

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

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

折线位置确定模块1103，用于将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端。

可选地，在本实施例中，所述折线构建模块1102具体用于：

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

本申请实施例所提供的隶属关系展示装置110可以为电子设备100上的特定硬件或者安装于电子设备100上的软件或固件等。本申请实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，前述描述的系统、装置和单元的具体工作过程，均可以参考上述方法实施例中的对应过程，在此不再赘述。

本申请实施例还提供了一种电子设备100，包括处理器130及存储有计算机指令的非易失性存储器120，所述计算机指令被所述处理器130执行时，所述电子设备100执行上述的隶属关系展示方法，具体执行方法可以参考上述方法实施例中的对应过程，在此不再赘述。

本申请实施例还提供了一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序被执行时实现上述的隶属关系展示方法，具体执行方法可以参考上述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请提供的实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

最后应说明的是，以上所述实施例，仅为本申请的具体实施方式，用以说明本申请的技术方案，而非对其限制，本申请的保护范围并不局限于此，尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本申请实施例技术方案的精神和范围。都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。

Claims (9)

1.一种隶属关系展示方法，其特征在于，应用于电子设备，所述方法包括：

设置至少一个父级输入框及与所述父级输入框并列设置的至少一个子级输入框，其中，所述父级输入框的宽度大于所述子级输入框的宽度，且所述父级输入框的一端与所述子级输入框的一端齐平，所述子级输入框包括相互平行的第一边及第二边，所述第一边位于所述第二边与所述父级输入框之间；

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

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

所述通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，包括：

通过CSS语言构建L型折线，其中，所述L型折线的第一线段的长度小于所述父级输入框与所述子级输入框的宽度差；

所述将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端，包括：根据所述子级输入框的位置将所述L型折线设置在所述子级输入框未与所述父级输入框齐平的一端，且所述L型折线的第一线段位于所述子级输入框的第二边所在的直线上。

2.根据权利要求1所述的方法，其特征在于，所述L型折线的第二线段的长度为子级输入框的行高及相邻两个子级输入框之间的间隙高度之和。

3.根据权利要求1所述的方法，其特征在于，通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，包括：

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

4.根据权利要求2或3所述的方法，其特征在于，将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端，包括：

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

5.根据权利要求2或3所述的方法，其特征在于，所述将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端，还包括：

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

6.根据权利要求5所述的方法，其特征在于，所述将所述L型折线沿所述子级输入框行高所在的方向朝向所述父级输入框移动，包括：

将所述L型折线沿所述子级输入框行高所在的方向朝向所述父级输入框移动半个所述子级输入框的行高的距离。

7.一种隶属关系展示装置，其特征在于，应用于电子设备，所述装置包括：

输入框设置模块，用于设置至少一个父级输入框及与所述父级输入框并列设置的至少一个子级输入框，其中，所述父级输入框的宽度大于所述子级输入框的宽度，且所述父级输入框的一端与所述子级输入框的一端齐平，所述子级输入框包括相互平行的第一边及第二边，所述第一边位于所述第二边与所述父级输入框之间；

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

折线位置确定模块，用于将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端；

所述折线构建模块具体用于：

通过CSS语言构建L型折线，其中，所述L型折线的第一线段的长度小于所述父级输入框与所述子级输入框的宽度差；

所述折线位置确定模块具体用于：

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

8.一种电子设备，其特征在于，包括处理器及存储有计算机指令的非易失性存储器，所述计算机指令被所述处理器执行时，所述电子设备执行权利要求1-6中任意一项所述的隶属关系展示方法。

9.一种存储介质，其特征在于，所述存储介质中存储有计算机程序，所述计算机程序被执行时实现权利要求1-6中任意一项所述的隶属关系展示方法。