Question

我在屏幕左侧的div中有一个编号列表。在该div的右侧，我有另一个div，其中包含与编号列表对应的项目。当屏幕最小化以使第一行中的文字换行到第二行时，我希望编号列表中的2移动到第三行以匹配第二项条目

我尝试了几个不同的东西（使用实际的编号列表，使用单个div等等）并且无法获得任何工作。使用单个div最有意义，但我希望编号列表位于左侧的单独栏中。这可以在链接小提琴中看到。任何帮助表示赞赏！

以下是未包装时的观看方式。

1   First Item
2   Second Item

以下是包装时当前的查看方式。

1   First
2   Item
    Second
    Item

以下是我喜欢看的方式。

1   First
    Item
2   Second
    Item

以下是代码：

<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>

在下面的示例中，当窗口足够小以至于文本换行时，列表中的数字2不会调整为保留第二个条目。

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

Answer 1

您可以使用CSS计数器代替行号。这个数字不仅与代码一致，而且还可以简化您的代码，因此您不必在标记中使用带有行号的单独元素。

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>

在包装文本时水平对齐多个div中的项目

1 个答案: