html - 有序列表前半部分的边框

Question

我需要在网页上以 HTML 格式显示条款和条件。如下面的屏幕截图所示，我需要在需要签署的条款和条件部分周围创建边框。问题是我不知道如何创建这个边框(屏幕截图中的第一个)，以便它环绕我需要的区域。

HTML:

<!-- MORE HTML ELEMENTS ABOVE -->

<li class="parent"><strong>CTU's Rights and Obligations</strong>
    <ol>
        <li class="child"><strong>CTU</strong> will offer the <strong>Student</strong> tutor-facilitated and/or virtual instructor-led and/or <strong>Blended Tuition</strong> in the year for the <strong>Programme</strong>.</li>
        <li class="child border-end">The <strong>Parties</strong> acknowledge that <strong>CTU</strong> provides facilitator-led tuition and therefore:
            <ol>
                <li class="sub-child">in the event of resignation or sickness or temporary indisposition of a facilitator, classes may become disrupted and be rescheduled;</li>
                <li class="sub-child">in the event of a permanent indisposition of the facilitator, <strong>CTU</strong> shall within reasonable time constraints, once the permanent indisposition has been confirmed, engage the services of another facilitator; and</li>
                <li class="sub-child"><strong>CTU</strong> shall not be liable for any disruption or rescheduling of classes due to a facilitator's personal indisposition.</li>
            </ol>
        </li>
        <li>Provisional timetables for the year shall be made available to the Student at the time of the commencement of the Student's Programmes. CTU reserves the right at, any time, to alter the timetables, with adequate notice being given to the Student, where reasonably possible. No other commitments should be made by the Student prior to receiving the schedule.</li>
        <li>Subject to <strong>CTU's</strong> rights to cancel any <strong>Programme</strong> on the terms and conditions set out hereunder, this <strong>Form</strong> constitutes an undertaking on the side of the <strong>Student</strong> to receive the tuition, participate in the <strong>Programme</strong> enrolled for and for the <strong>Student</strong> and/or the <strong>Parent/Guardian</strong> to pay the <strong>Programme Fees</strong> in full, as and when the <strong>Fees</strong> become due and payable.
        </li>
    </ol>

    <!-- MORE HTML ELEMENTS BELOW -->

</li>

我尝试过的事情:

<强>1。 parent 周围的边框

// Doesnt work, border is around whole ordered list
.parent {
    border:1px solid
}

<强>2。 parent 和 child 周围的边界

// Works for top border, but not sure how to get left & right border
.parent {
    border-top:1px solid black;
}
// Kind of works, not sure how to extend borders
.border-end {
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

<强>3。使用伪元素

这似乎是迄今为止最好的解决方案，但还不是 100%。问题是文本的高度可能不同，所以不太确定如何不对宽度和高度进行硬编码。 Here is an example以下:

.parent {
    position: relative;
    padding-top: 20px;
    margin-top: 20px;
}
.parent:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 110%;
    background: #000;
    top: 0;
    left: -5%;
}
.border-end {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.border-end:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 115%;
    background: #000;
    bottom: 0;
    left: -10%;
}
.border-end:before {
    content: "";
    position: absolute;
    height: 136%;
    width: 1px;
    background: #000;
    top: -37%;
    left: -10%;
}

任何帮助将不胜感激!

Answer 1

你可以用那么多 tweeks 来完成。

.border {
  border: 1px solid black
}

.wrapper {
  position: relative;
}

.wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  border: 1px solid black;
  border-bottom: none
}

ol.parent {
  width: 100%;
  padding: 0;
  margin-top: 15px;
  counter-reset: item;
  position: relative;
}

.child {
  padding: 0 30px;
  list-style: none;
  counter-increment: item;
  width: calc(100% - 60px);
}
.child:before {
  content: counter(item) ". ";
  position: absolute;
  left: 16px;
}

.border-side {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.border-bottom {
  border-bottom: 1px solid black;
}

<li class="wrapper"><strong>CTU's Rights and Obligations</strong>
  <ol class="parent">
    <li class="child border-side"><strong>CTU</strong> will offer the <strong>Student</strong> tutor-facilitated and/or virtual instructor-led and/or <strong>Blended Tuition</strong> in the year for the <strong>Programme</strong>.</li>
    <li class="child border-side border-bottom">The <strong>Parties</strong> acknowledge that <strong>CTU</strong> provides facilitator-led tuition and therefore:
      <ol>
        <li class="sub-child">in the event of resignation or sickness or temporary indisposition of a facilitator, classes may become disrupted and be rescheduled;</li>
        <li class="sub-child">in the event of a permanent indisposition of the facilitator, <strong>CTU</strong> shall within reasonable time constraints, once the permanent indisposition has been confirmed, engage the services of another facilitator; and</li>
        <li class="sub-child"><strong>CTU</strong> shall not be liable for any disruption or rescheduling of classes due to a facilitator's personal indisposition.</li>
      </ol>
    </li>
    <li class="child">Provisional timetables for the year shall be made available to the Student at the time of the commencement of the Student's Programmes. CTU reserves the right at, any time, to alter the timetables, with adequate notice being given to the Student,
      where reasonably possible. No other commitments should be made by the Student prior to receiving the schedule.</li>
    <li class="child border">Subject to <strong>CTU's</strong> rights to cancel any <strong>Programme</strong> on the terms and conditions set out hereunder, this <strong>Form</strong> constitutes an undertaking on the side of the <strong>Student</strong> to receive the tuition,
      participate in the <strong>Programme</strong> enrolled for and for the <strong>Student</strong> and/or the <strong>Parent/Guardian</strong> to pay the <strong>Programme Fees</strong> in full, as and when the <strong>Fees</strong> become due and
      payable.
    </li>
  </ol>

  <!-- MORE HTML ELEMENTS BELOW -->

</li>