项目保证金最高问题[重复]答案

【问题标题】：items margin top issue [duplicate]项目保证金最高问题[重复]
【发布时间】：2018-06-20 14:47:31
【问题描述】：

我有 3 个带有 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;
}

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

如何仅定位偶数元素？提前致谢！

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

标签： html css margins

【解决方案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>

【讨论】：

快速标注 - 我正在尝试记住确切的错误，但我记得使用 translateY 时存在问题，需要使用 translate(0,5px) 来代替完整的浏览器兼容性。这可能只是在制作动画时，但那是不久前的事了。
@jmcgriz 公平点，虽然我不熟悉所说的问题。如果您找到参考，请随时编辑！
附带说明：用 margin-top 替换转换并添加 vertical-align:top 然后它将起作用...

【解决方案2】：

当放入适当的 sn-p 时，它主要是有效的 - 如果我理解你的问题。最大的问题似乎是，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>

【讨论】：