Вставьте строку между двумя элементами, используя CSS - PullRequest
Новая
       41

Вставьте строку между двумя элементами, используя CSS

2 голосов
/ 03 октября 2019

Я редактирую диаграмму последовательности на https://app.zenuml.com/ с помощью кода, подобного следующему: 

// This is a sample
A.method() {

}

A.anotherMethod() {

}

В представленной диаграмме я хочу вставить сплошную линию между двумя методами. enter image description here

Похоже, что ZenUml имеет поддержку CSS, чтобы изменить стиль диаграммы. Интересно, можно ли добавить строку с помощью CSS.

Сгенерированный DOM, как показано ниже. Вы можете проверить это из https://app.zenuml.com, вставив вышеуказанный DSL в редакторе. 

<div data-v-6909fd0d="" class="message-layer">
    <div data-v-6909fd0d="" style="padding-left: 4px;">
        <div>
            <div data-v-44cbabc4="" signature="method()" class="interaction sync" style="width: 128px;">
                <!---->
                <div data-v-50fe6874="" data-v-44cbabc4="" class="message" style="border-bottom-style: solid;">
                    <div data-v-50fe6874="" class="name">method()</div>
                    <div data-v-102217b1="" data-v-50fe6874="" class="point fill"><svg data-v-102217b1="" height="20"
                            class="arrow">
                            <polyline data-v-102217b1="" points="0,7 10,13 0,19" class="right"></polyline>
                            <polyline data-v-102217b1="" points="10,7 0,13 10,19" class="left"></polyline>
                        </svg></div>
                </div>
                <div data-v-a0d3b81a="" data-v-44cbabc4="" class="occurrence">
                    <div data-v-a0d3b81a=""></div>
                </div>
                <!---->
            </div>
        </div>
        <div>
            <div data-v-44cbabc4="" signature="anotherMethod()" class="interaction sync" style="width: 128px;">
                <!---->
                <div data-v-50fe6874="" data-v-44cbabc4="" class="message" style="border-bottom-style: solid;">
                    <div data-v-50fe6874="" class="name">anotherMethod()</div>
                    <div data-v-102217b1="" data-v-50fe6874="" class="point fill"><svg data-v-102217b1="" height="20"
                            class="arrow">
                            <polyline data-v-102217b1="" points="0,7 10,13 0,19" class="right"></polyline>
                            <polyline data-v-102217b1="" points="10,7 0,13 10,19" class="left"></polyline>
                        </svg></div>
                </div>
                <div data-v-a0d3b81a="" data-v-44cbabc4="" class="occurrence">
                    <div data-v-a0d3b81a=""></div>
                </div>
                <!---->
            </div>
        </div>
    </div>
</div>

Ответы [ 3 ]

0 голосов
/ 03 октября 2019

Для правильного ответа нам нужно увидеть, какой HTML-код на самом деле генерируется.

Но если предположить, что два «метода», как вы их называете, идентифицируются классом «.method», то CSS выглядит следующим образом: 

.method + .method { margin-top: 1em; }

вставит пустую строку полной высоты между любыми двумя последовательными "методами".

РЕДАКТИРОВАТЬ:

К сожалению, сгенерированный код не предоставляет "класс= "на соответствующих div. Вы должны сделать что-то вроде этого: 

.message-layer  div  div+div  { margin-top: 1em; }
0 голосов
/ 03 октября 2019

Попробуйте использовать <hr>. Вы не можете создать элемент в CSS, но вы можете изменить его стиль. Если вы использовали JavaScript document.createElement(hr[, options]), вы можете сделать это, но без CSS.

0 голосов
/ 03 октября 2019

во-первых, вопрос кажется запутанным. Я не вижу никаких элементов HTML.

, но что касается создания строки с помощью CSS:

  1. добавьте div
  2. , сделайте его высотой в один или 2 пикселя(предполагая горизонтальную линию)
  3. сделайте ширину столько, сколько вы хотите, и используйте margin:auto;, чтобы центрировать
  4. , заполните ее черным (или любым другим цветом, который вы предпочитаете)
...