1

I'm facing a little problem at the moment:

On my site im working with HTML's <details>-tag. My idea is to have a border around it when it's opend.

The following picture shows how it actually looks like. The red line is what I want to add:

enter image description here

My code looks like that:

.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>

4

2 回答 2

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>

于 2015-12-01T15:19:02.427 回答
0

对于 classsummary或 class details，尝试给三个边边框。作为 -

.details/.summary{
  border-left:1px solid red;
  border-top:1px solid red;
  border-bottom:1px solid red;
}
于 2015-12-01T15:10:10.510 回答