Question

我正在乱用代码搜索ui，它按文件列出匹配的行以及周围的代码。匹配的行及其周围环境在overflow: auto的容器div中列出，以便可以滚动代码。

以下是html和css的布局：

.container {
  width: 200px;
  overflow: auto;
  border: 2px solid #CCC;
}

.match:first-child {
  border-top: none;
}

.match {
  border-top: 1px solid red;
}

span {
  white-space: pre;
}

<div class="container">
  <div class="match">
    <div class="line">
      <span>This content is so long that it ends up going beyond the edge of the container. Good thing we are using overflow: auto so we can scroll!</span>
    </div>
    <div class="line">
      <span>Another line that is too long to fit into the container.</span>
    </div>
    <div class="line">
      <span>There can be many lines in each match, but the border should only be between the matches, not the lines.</span>
    </div>
  </div>
  <div class="match">
    <div class="line">
      <span>The second line. Does it matter how long this line is? Will the line border extend now that this line is overflowing?</span>
    </div>
  </div>
</div>

问题在于，当.line div中的内容超出.container时，.match元素上的边框只会扩展到.container的宽度。

有没有办法让.match元素扩展到容器的整个宽度，以便边框扩展可滚动区域的整个宽度？

Answer 1

您遗失的秘密是.match和.line都需要自动扩展到孩子的宽度</ strong>的100％。

解决此问题的最简单方法是display: inline：

.match, .line { display: inline; }

我创造了一个展示这个here的新小提琴。

希望这有帮助！：）

Answer 2

您可以在display: table-row上设置.match，并在.line上设置边框

.match {
  display: table-row;
}
.match ~ .match .line:first-child {
  border-top: 1px solid red;
}

<强> jsFiddle

或

.match {
  display: table-row;
}
.match:not(:first-child) .line:first-child {
  border-top: 1px solid red;
}

<强> jsFiddle

Answer 3

我没有完整的代码，因此我无法准确测试您正在尝试做的事情。但是，您似乎缺少＆＃34;宽度：100％＆＃34;在.match和.line上。请注意，100％是父项的100％，而不是视口的。

.match, .line {
    width: 100%;
}

使子div扩展到溢出内容的宽度

3 个答案: