代码之家 › 专栏 › 技术社区 › Zane Clark

边距防止文本对齐;

text-align margin css html

Zane Clark · 技术社区 · 9 年前

(如果有更简单的解决方案,请告诉我)

我希望这个网站有两个文本部分,一个在屏幕的每一边。

我成功地做到了。我使用文本对齐和平移3D将文本向右移动,然后向上移动。

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

我决定改变右边文本的宽度,当我这样做时,文本对齐不起作用,因为边距(检查边距)。

我决定将边距更改为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;
}

那么,有没有可能在屏幕的两侧同时显示文本,并使它们彼此分开?

或者,是否有一种方法可以完全删除边距?

3 回复 | 直到 9 年前

kind user Faly 9 年前

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

rjmunro 9 年前

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

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

Mr Lister hawi 9 年前

可能是错的吗 <div> 开始时标记?您已经从结束div标记开始。

如果你解决了这个问题,你就能得到你想要的。

.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)
}

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