html - 边距防止文本对齐；

Question

(如果有更简单的方法解决这个问题，请告诉我)

我希望这个网站有 2 个文本部分，屏幕的每一侧各一个。

我成功了。我使用文本对齐和 translate3d 将文本向右移动，然后向上移动。

唯一的问题是右侧文本的宽度阻碍了左侧文本的交互。

我决定更改右侧文本的宽度，当我这样做时，由于边距(检查说的边距)，文本对齐不起作用。

我决定将边距更改为 0，但什么也没发生。

我不知道为什么，但这里有一些代码:

.mid{
  margin: 0px 0px 0px 0px;
  font-family:myfont;
  font-size:150px;
}

.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}

---

</div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>

---

我后来添加了这个，但仍然没有任何反应:

#calculator{
margin: 0 !important;
}

---

那么，有没有办法让文本同时出现在屏幕的两边，并且它们彼此分开？

或者有没有办法完全去除边距？

Answer 1

.mid {
  margin: 0;
  font-family: myfont;
  font-size: 50px;
  float: left;
  width: 50%;
}
.mid:nth-child(even) {
  text-align: right;
}

<div id="midwlink">
  <p id="games" class="mid">Games</p>
  <p id="calculators" class="mid">Calculators</p>
  <p id="animations" class="mid">Animations</p>
  <p id="pictures" class="mid">Pictures</p>
</div>