Question

我想完成一个非常简单的布局，但我正在努力。我希望标题在父div中居中，并在标题右侧浮动一个按钮（在同一行上）。下面的代码实现了这种效果，但是按钮是不可点击的，因为标题覆盖了它。有关如何实现这一目标的任何建议吗？

<div class="parent">
  <div class="header">My header:</div>
  <button type="button" name="abutton" class="button" onclick="alert('a');">The button!</button>
</div>

{{1}}

编辑：

修正了代码错误。

Answer 1

使用z-index css属性（并使按钮相对定位）：

.header {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 20px;
  text-align: center;
  text-decoration: underline;
  z-index: 1;
}

.button {
   float: right;
   position: relative;
   z-index: 2;
}

Answer 2

此answer可能会对您有所帮助。

<强> HTML

<div class="parent">
    <div class="header">
      My header:
    <button type="button" name="abutton" class="button">The button!</button>
    </div>
</div>

<强> CSS

.parent {
  border: solid 3px #000;
  padding: 5px;
  position: relative;
}

.button {
   float: right;
}

Answer 3

将z-index设为.header和.button。

.header {z-index: 1;}
.button {z-index: 2; position: relative;} /* z-index is applied to positioned elements only */

Answer 4

我认为你可能会以错误的方式解决这个问题。

我不确定为什么你的header_text绝对定位，但让事情正常流动会更容易，但按钮就是这样。

＆＃13;

.header_text {
  font-size: 20px;
  text-align: center;
  text-decoration: underline;
}
.parent {
  border: solid 3px #000;
  padding: 5px;
  position: relative;
}
.button {
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

<div class="parent">
  <div class="header">
    <h1 class="header_text">My Header Text</h1>
  </div>
  <button type="button" name="abutton" class="button">The button!</button>
</div>

＆＃13;

Answer 5

.header_text {
  left: 0;
  right: 0;
  font-size: 20px;
  text-align: center;
  text-decoration: underline;
}
.parent {
  border: solid 3px #000;
  padding: 5px;
  position: relative;
}
.button {
  float: right;
  margin-top: -24px;
}

<div class="parent">
  <div class="header_text">My header:</div>
  <button type="button" name="abutton" class="button" onclick="alert('a');">The button!</button>
</div>

如何将文本排成一行，按钮浮动到右边？

5 个答案: