项目毛利率最高的问题

Question

我有3个带有{​​{1}}的列表项。我希望偶数元素的位置较低，但是当我尝试使用display: block时，我所有的元素的位置都较低。

margin-top

.hero__description-right {
  margin-left: 0px;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.description__item {
  margin-top: 0px;
  display: inline-block;
  position: relative;
  clear: both;
}

.description__item:last-child {
  margin-bottom: 0px;
}

.description__item:nth-child(2n) {
  margin-left: 0px;
  margin-top: 20px;
}

如何仅定位偶数元素？预先感谢！

Answer 1

似乎您只想视觉上移动偶数元素-在这种情况下，最好使用transform: translate而不是空白（这是因为margin影响文档流中的其他元素，而transform只是视觉上移动它们），例如：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}

li:nth-child(even) {
  transform: translateY(5px);
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Answer 2

放入适当的代码段后，通常可以正常工作-如果我理解您的问题。最大的问题似乎是，li元素不属于div内-它们必须位于ul或ol元素内。

.hero__description-right {
	margin-left: 0px;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.description__item {
	margin-top: 0px
	display: inline-block;
	position: relative;
	clear: both;
}

.description__item:last-child {
	margin-bottom: 0px;
}

.description__item:nth-child(2n) {
	margin-left: 0px;
	margin-top: 200px;
}

<ul class="hero__description-right">
	<li class="description__item">
		<h2><span class="hashtag">#</span> Text</h2>
	</li>
	<li class="description__item test">
		<h2><span class="hashtag">#</span> Text</h2>
	</li>
	<li class="description__item">
		<h2><span class="hashtag">#</span> Text</h2>
	</li>
</ul>