html - 将文本居中到外部 div 而不与其他 div 重叠

Question

我们有外部 div header，它的容器宽度为 100%。 div 用于标题文本和右侧的按钮。文本必须以 header 为中心，按钮必须在右侧。但是，如果文本足够长以与按钮重叠，则文本应填充 header 的左侧部分并且不要继续按钮。

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

尝试在 header->text 和 position: absolute 上使用 position: relative； 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>