Question

.container {
  display: flex;
  justify-content: start;
  border-right:1px solid black;
}

.side-nav {
  border-right: 1px solid #111;
  height: 200px;
  padding-right: 20px;
}

.main-content {
  margin-right: 20px;
  margin-left: 20px;
}

.divider {
  border-bottom: 1px solid gray;
}

.divider:before{
    position: relative;
        content: "";
        width: 100%;
        top: 1px;
        right: 22px;
        padding-right: 20px;
        padding-left: 20px;
        border-bottom: 1px solid gray;
}

<div class="container">
  <div class="side-nav">
    one
  </div>
  <div class="main-content">
    two

    <div class="divider"></div>
      <p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
      <div class="divider"></div>
   </div>
   </div>

我正在创建页面布局。在容器内部，有两个容器-导航栏和主要内容。在主要内容中，有一个带有一些演示文本的p标签。 p标签被两个边框容器包围。我无法将边界线扩展到主容器的宽度。我提供了一个摘要，有人可以帮我解决这个问题。

Answer 1

如果我对您的理解正确，请将flex: 1添加到.main-content上，这样它将占用剩下的整个宽度。

.container {
  display: flex;
  justify-content: start;
  border-right: 1px solid black;
}

.side-nav {
  border-right: 1px solid #111;
  height: 200px;
  padding-right: 20px;
}

.main-content {
  margin-right: 20px;
  margin-left: 20px;
  flex: 1;
}

.divider {
  border-bottom: 1px solid gray;
}

.divider:before {
  position: relative;
  content: "";
  width: 100%;
  top: 1px;
  right: 22px;
  padding-right: 20px;
  padding-left: 20px;
  border-bottom: 1px solid gray;
}

<div class="container">
  <div class="side-nav">
    one
  </div>
  <div class="main-content">
    two

    <div class="divider"></div>
    <p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
    <div class="divider"></div>
  </div>
</div>

但是似乎您在这里还有更多问题。例如，如果没有足够的空间，则在文本顶部显示右边框。另外，.main-content左侧还有一些小的顶部和底部边框。你想做什么看起来如何？

Answer 2

您在right:22px中输入了:before。这就是这里的问题。

.container {
  display: flex;
  justify-content: start;
  border-right: 1px solid black;
}

.side-nav {
  border-right: 1px solid #111;
  height: 200px;
  padding-right: 20px;
}

.divider {
  border-bottom: 1px solid gray;
}

.divider:before {
  position: relative;
  content: "";
  width: 100%;
  top: 1px;
  padding-right: 20px;
  padding-left: 20px;
  border-bottom: 1px solid gray;
}

p {
  word-break: break-word;
  padding:10px
}

<div class="container">
  <div class="side-nav">
    one
  </div>
  <div class="main-content">
    <p style="padding:0 10px;margin:0">two</p>

    <div class="divider"></div>
    <p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
    <div class="divider"></div>
  </div>
</div>

Answer 3

老实说，我不知道您要在这里做什么，但是下面的修改示例看起来要好一些，不是吗？

.container {
  display: flex;
  justify-content: start;
  border-right: 1px solid black;
}

.side-nav {
  border-right: 1px solid #111;
  height: 200px;
  padding-right: 20px;
}

.main-content {
  padding: 0 20px;
  word-break: break-word;
}

.divider {
  border-top: 1px solid tomato;
  border-bottom: 1px solid gray;
  display: block;
  margin: 0 -20px;
  position: relative;
}

<div class="container">
  <div class="side-nav">
    one
  </div>
  <div class="main-content">
    two

    <hr class="divider" />
    <p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
    <hr class="divider" />
  </div>
</div>

如果分隔线中的:before元素具有与边框相同的颜色，我看不出其原因，您可以将边框设为2px ...或更笼统地说，您需要使用不同的颜色，您可以只使用顶部/底部边框，而根本不需要:before，也可以选择使用<hr />元素，这样会更多无论如何还是语义=）

无法将边框延伸超出容器的宽度

3 个答案: