Question

（如果这个问题有一个更简单的解决方案，请告诉我）

我希望这个网站有2个部分的文字，一个在屏幕的两边。

我成功地做到了这一点。我使用text align和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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

有很多方法可以在HTML中实现并排布局。其中一个最简单的方法是并排使用两个div，就像在这个片段中一样。

＆＃13;

div {
  width: 49%;
  display: inline-block;
}
div.right {
  text-align: right
}

＆＃13;

<div class="left">
  Hello left
</div>
<div class="right">
  Hello right
</div>

＆＃13;

Answer 3

一开始可能是错误的<div>标签吗？您已经开始使用结束div标记。

如果你解决了这个问题，那么你就得到了你想要它做的事情。

＆＃13;

.mid{
  margin: 0px 0px 0px 0px;
  font-family:myfont;
  font-size:50px;
}

.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}

＆＃13;

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

＆＃13;

边距防止文本对齐;

3 个答案: