All geek questions in one place

Horizontal alignment of elements from multiple divs when text is wrapped

I have a numbered list in a div on the left of the screen. To the right of this div, I have another div with elements that correspond to a numbered list. When the screen is minimized so that the text in the first line turns to the second line, I would like 2 from the numbered list to move to the third line to match the Second Item entry .

I tried a couple of different things (using actual numbered lists, using a single div, etc.) and couldn't make something work. Using a single div makes the most sense, but I want the numbered list to be on a separate line on the left. this can be seen in the linked violin. Any help is appreciated!

  • The following shows how it is viewed when it is not wrapped.
1 First Item
2 Second Item
  1. The following shows how it is viewed at completion.
1 First
2 Item
    Second
    Item
  1. The following shows how I would like to view it upon completion.
1 First
    Item
2 Second
    Item

Here is the code:

<div class="xml-block">
<div id="xml-sidebar">
    <p class="xml-number">1</p>
    <p class="xml-number">2</p>
</div>

<div id="xml-group">
  <p class="xml-symbol xml-list">Position of the first entry.</p>
  <p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p>
</div>

In the following example, when the window is small enough for the text to wrap, number 2 from the list is not adjusted to remain with the second input.

https://jsfiddle.net/b1Lpeffw/2/

+4
source share
1 answer

Instead, you can use CSS counters for line numbers. Not only will the number coincide with the code, but it will also simplify your code quite a bit, so you do not need to have a separate element with line numbers in your markup.

html {
	background-color: #272822;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
}

#xml-group {
	padding: 0;
  counter-reset: count;
}

#xml-group:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
	width: 3em;
	height: 100%;
	background-color: #1C1C18;
	margin: 0;
	padding: 0;
	border-right: 1px solid #505050;
}

.xml-list {
	font: 18px Monospace;
	color: #FFFFFF;
	text-decoration: none;
	padding: 0;
	margin: 0;
  position: relative;
  padding: 0 0 0 4rem;
}

.xml-list:before {
  counter-increment: count;
  content: counter(count);
  font: 18px Monospace;
	color: #505050;
	text-decoration: none;
  position: absolute;
  left: 0;
  width: 3em;
  text-align: center;
}

.xml-text {
	color: #EA9200;
}

li.xml-text-indent1 {
	margin-left: 1.5em;
}

li.xml-text-indent2 {
	margin-left: 3em;
}

li.xml-text-indent3 {
	margin-left: 4.5em;
}

li.xml-text-indent4 {
	margin-left: 6em;
}

.xml-symbol {
	color: #C177FF;
}

.xml-list li p {
	margin: 0;
	padding: 0;
}
<body>
  <div class="xml-block">

    <div id="xml-group">
      <p class="xml-symbol xml-list">Position of the first entry.</p>
      <p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p>
    </div>
  </div>
</body>
Run codeHide result
+1
source

Source: https://habr.com/ru/post/1678082/

More articles:


All Articles