html - 细节标签周围的边框

Question

我现在遇到了一个小问题:

在我的网站上，我正在使用 HTML 的 <details> -标签。我的想法是在它打开时在它周围有一个边框。

下图显示了它的实际外观。红线是我要补充的:

我的代码是这样的:

.myListDiv {
  width: 230px;
  height: 500px;
  overflow-x: hidden;
}
h2 {
  font: 400 25px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
.myUL {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.testList:last-child {
  border: none;
}
.testList {
  text-decoration: none;
  color: #000;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
  display: block;
  width: 180px;
  font: 200 15px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}
.testList:hover {
  font-size: 20px;
  background: #f6f6f6;
}
h2:hover + .myUL {
  display: block;
}
.myUL:hover {
  display: block;
}
.DetailDiv {
  z-index: 100;
  top: 50px;
  position: relative;
}
.Details {
  margin: 10px;
  outline: none;
}
.Summary {
  position: relative;
  top: 8px;
  background-color: #EAEAEA;
  border-radius: 10px;
  color: #999999;
  border: 1px solid #cdcdcd;
  outline: none;
}

<div id="ContentPlaceHolder1_placeHolder">
  <details class="Details">
    <summary class="Summary">Test</summary>
    <div style="position:relative; top: 10px;">
      <div class="myListDiv" style="position:absolute; left:10px">
        <h2>test0</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>
      <div class="myListDiv" style="position:absolute; left:260px">
        <h2>test1</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>

      <div class="myListDiv" style="position:absolute; left:510px">
        <h2 style="">test2</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>

    </div>
  </details>

Answer 1

这个怎么样？

.myListDiv {
  width: 32%;
  height: 500px;
  overflow-x: hidden;
  display: inline-block;
}
details > div {
  border: 1px solid red;
  border-top:0;
}
h2 {
  font: 400 25px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
.myUL {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.testList:last-child {
  border: none;
}
.testList {
  text-decoration: none;
  color: #000;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
  display: block;
  width: 180px;
  font: 200 15px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}
.testList:hover {
  font-size: 20px;
  background: #f6f6f6;
}
h2:hover + .myUL {
  display: block;
}
.myUL:hover {
  display: block;
}
.DetailDiv {
  z-index: 100;
  top: 50px;
  position: relative;
}
.Details {
  margin: 10px;
  outline: none;
}
.Summary {
  position: relative;
  top: 8px;
  background-color: #EAEAEA;
  border-radius: 10px;
  color: #999999;
  border: 1px solid #cdcdcd;
  outline: none;
}

<div id="ContentPlaceHolder1_placeHolder">
  <details class="Details">
    <summary class="Summary">Test</summary>
    <div style="position:relative; top: 10px;">
      <div class="myListDiv">
        <h2>test0</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>
      <div class="myListDiv">
        <h2>test1</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>

      <div class="myListDiv">
        <h2 style="">test2</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>

    </div>
  </details>