Question

我的HTML就像这样

 <div class="maindiv">
   <h1>Hello World</h1>
   <h1>Click Here</h1>
 </div>

我正在尝试将Hello World置于中心位置，将Click Here文本放置在屏幕右边缘的5％位置。

这是我的CSS

    .maindiv {
    position: relative;
     }

   .maindiv h1:nth-child(1) {
    text-align: center;
    }

   .maindiv h1:nth-child(2) {
    right: 5%;
    }

我不知道为什么它不起作用。我已经将父母的div设置为亲戚，并将第二个孩子设置为正确的5％，所以它应该是从右边5％的折扣，但它仍然在左边

Answer 1

使用margin-right而不是正确的属性。

.maindiv h1:nth-child(2) { margin-right: 5%; }

Answer 2

.maindiv上的规则仅定义了div对其父元素的行为方式。它对div的孩子没有影响。

您对第二个h1的规则无效，因为静态定位会忽略right，如果您使用relative定位，则会将元素向左移动。您希望它不大于水平空间的100％，但仍受父级边界的影响。这就是position: absolute的用武之地。为了使它相对于父级，父级需要其relative而不需要任何其他设置（或者任何非静态的）。

如果您希望它们处于相同的高度，我建议使用float top: 0或position: absolute。

您可能想要的是：

＆＃13;

.maindiv {
  /* only as a reference for children positioning */
  position: relative;
}

.maindiv > h1 {
  /* You don't want margins to affect positioning here */
  margin: 0;
}

.maindiv h1:nth-child(1) {
  text-align: center;
}

.maindiv h1:nth-child(2) {
  position: absolute;
  right: 5%;
  top: 0;
}

＆＃13;

<div class="maindiv">
  <h1>Foo</h1>
  <h1>Bar</h1>
</div>

＆＃13;

Answer 3

像这样设计你的CSS：

.maindiv {
    position: relative
}
.maindiv h1:nth-child(1) {
    position: absolute;
    left: 50%;
    top: 50%;
}
.maindiv h1:nth-child(2) {
    position: absolute;
    bottom: 0;
    right: 5%;
}

<div class="maindiv">
<h1>Centered</h1>
<h1>right-aligned</h1>
</div>

Answer 4

使用right，left，top和bottom定位元素时，想象一下按指定的方向推送元素。即right:5%;将元素向右推5％。

在这种情况下，您只需将.maindiv与text-align:right对齐即可。像这样：

.maindiv {
  position: relative;
  width: 100%;
  text-align: right;
}

.maindiv h1:nth-child(1) {
  text-align: center;
}

.maindiv h1:nth-child(2) {
  position: relative;
  right: 5%;
}

<div class="maindiv">
<h1>centered</h1>
<h1>right aligned</h1>
</div>

您的代码现在可以使用。

Answer 5

在一个html页面中使用多个<h1>标签并不好。所以我将点击此处更改为<a>，因为它似乎是一个按文字链接。在下面的代码中，单击此处相对于<h1>放置，因此如果您要移动html单词，单击此处也将随之移动。试试吧。

＆＃13;

.maindiv h1 {
  text-align: center;
  position: relative;
  line-height: 20px;
}

.maindiv h1 a {
  position: absolute;
  right: 5%;
  font-size: 16px;
}

＆＃13;

<div class="maindiv">
   <h1>Hello World
    <a href="#">Click Here</a>
   </h1>
 </div>

＆＃13;

如何从屏幕右边缘定位文本5％？

5 个答案: