Это несколько отвечает на ваш вопрос [*] [* = однако я написал большую часть этого кода прежде, чем прочитал, увидев ваше первое изображение, не видя содержимого h2 / div].
Основная часть ответаэто HTML / CSS, но есть небольшой кусочек javascript для установки активного класса li [узлов до выбранной точки].
Запустите фрагмент и по очереди нажмите на элементы узла, чтобы увидетьнарисованные линии.
РЕДАКТИРОВАТЬ: Re.Ваши вопросы:
Что касается последнего узла, вы можете выбрать для него другую ширину, удалить border-width / margin / padding или display: none.Если вы используете селектор : last-child , вы можете присвоить последнему элементу различные значения свойств по мере необходимости, используя CSS.
Что касается разных шрифтов / смещения, я бы сказал, что то же самоеверно для большинства кода с использованием разных шрифтов.Старайтесь использовать один и тот же шрифт последовательно (в данном случае я бы посоветовал это лучше).Что касается рассогласования, если его размеры изменяются, что в большинстве случаев приводит к неправильному выравниванию, попробуйте использовать фиксированную ширину с object-fit (лучше всего для вас будет отображаться ограничение / уменьшение). Вы можете установить переполнение на div, и незабудь wrap
Сосредоточение меток: ты пробовал просто добавить text-align: center;?Не уверен, что предложить относительно отрицательного смещения, так как это зависит от других CSS.Должен был бы увидеть полный макет CSS / HTML.
Re.потенциально перекрывающиеся div: установите max-width для вашего контента и overflow / overflow-y на авто при необходимости.
Надеюсь, это поможет!
var nodelist1 = document.getElementById("connect");
var mynodes = nodelist1.getElementsByTagName("li");
for (var i = 0; i < mynodes.length; i++) {
mynodes[i].addEventListener("click", function() {
var currNode = document.getElementsByClassName("active");
currNode[0].className = currNode[0].className.replace("active", "");
this.className += "active";
});
}
body {
font-family: "Font Awesome 5 Free";
/* padding: 2em;*/
}
#connect {
font-weight: 300;
content: "\f111";
}
h1,
h2 {
margin: 0;
padding: 0;
}
li {
vertical-align: middle;
display: inline-block;
position: relative;
color: white;
width: 4em;
height: 4em;
text-align: center;
margin: 0em .8em;
line-height: 4em;
border-radius: 1em;
background: navy;
}
li::before {
content: '';
position: absolute;
top: 2em;
left: -3em;
min-width: 4em;
/*width of connecting line*/
height: .2em;
background: maroon;
z-index: -1;
}
li:first-child::before {
display: none;
/*at pos 1, other nodes are 'disabled' line is light blue*/
}
.active {
background: navy;
}
.active~li {
background: lightgray;
}
.active~li::before {
background: lightblue;
}
.content {
display: none;
width: 5em;
max-height: 6em;
overflow-y: scroll;
overflow-x: none;
line-height: 1em;
color: red;
padding: 0;
margin: 0;
}
.active .content {
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<ul id="connect">
<li>1</li>
<li class="active">2</li>
<li>
<h2>Node A</h2>
<div class="content">Manuel: hello how are you I speak English I learn it from a book</div>
</li>
<li>4</li>
<li>5</li>
</ul>