Question

我们有外部div header，它的容器宽度为100％。 div用于标题文本和右侧按钮。文本必须以header为中心，按钮必须在右侧。但是如果文本足够长以与按钮重叠，那么文本应该填充header的左侧部分，而不是按下按钮。

header -> [           [CENTER TEXT]   [button]]
    OR (with wider CENTER TEXT)
header -> [[abcdabcdab CENTER TEXT cd][button]]

当将其作为中心文字的子项放置时，在position: relative和header->text按钮上尝试使用position: absolute; left: 100%;。但这并不是应该是什么样子。用纯CSS做任何好方法吗？按钮应放置在header的右边界处，而不是边距到中心文本。

Answer 1

你可以使用这个简单的技巧：

使用文本本身后面的内联范围。一旦文本长度超过标题的大小，跨度就会下降到下一行，文本可以占用所有空格。

请注意，您需要为按钮设置固定宽度。

div.container {
  border: 1px solid red;
  height: 50px;
  width: 100%;
  position: relative;
}

h1 {
  background: gray;
  width: calc(100% - 100px);
  float: left;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 0;
  direction: rtl;
}

h1 span.text {
  color: black;
  background: lightyellow;
  direction: ltr;
}

h1 span.padding-holder {
  width: 100px;
  display: inline-block;
  position: relative;
}

button {
  float: right;
  width: 100px;
  height: 50px;
}

<div class="container">
  <h1>
    <span class="text">Short Header</span>
    <span class="padding-holder"></span>
  </h1>
  <button>Click Me</button>
</div>

<div class="container">
  <h1>
    <span class="text">Now a Medium Header</span>
    <span class="padding-holder"></span>
  </h1>
  <button>Click Me</button>
</div>

<div class="container">
  <h1>
    <span class="text">And This is a Very Long Header</span>
    <span class="padding-holder"></span>
  </h1>
  <button>Click Me</button>
</div>

将文本居中到外部div而不覆盖其他div

1 个答案: