时间戳

首页 > 解决方案 > CSS Accordion：超链接（a）不继承样式

html - CSS Accordion：超链接（a）不继承样式

问题描述

我试图让它工作：

body {
  background-color: #c15236;
  font-family: 'Arial';
  padding: 2em 6em;
}

h1 {
  color: #fff;
  text-align: center;
}


/*--------Accordion-------*/

.acc-kontainer {
  width: 100%;
  margin: auto;
}

.acc-kontainer .acc-body {
  width: 98%;
  width: calc(100% - 20px);
  margin: 0 auto;
  height: 0;
  color: rgba(0, 0, 0, 0);
  ;
  background-color: rgba(255, 255, 255, 0.2);
  line-height: 28px;
  padding: 0 20px;
  box-sizing: border-box;
  transition: 0.5s;
}

.acc-kontainer label {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
  padding: 15px;
  width: 100%;
  color: #fff;
  font-weight: 400;
  box-sizing: border-box;
  z-index: 100;
}

.acc-kontainer input {
  display: none;
}

.acc-kontainer label:before {
  font-family: 'FontAwesome';
  content: '\f067';
  font-weight: bolder;
  float: right;
}

.acc-kontainer input:checked+label {
  background-color: rgba(255, 255, 255, 0.15);
}

.acc-kontainer input:checked+label:before {
  font-family: 'FontAwesome';
  content: '\f00d';
  transition: 0.5s;
}

.acc-kontainer input:checked~.acc-body {
  height: auto;
  color: #fff;
  font-size: 16px;
  padding: 20px;
  transition: 0.5s;
}
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body>
  <h1>Pure HTML+CSS Accordion (Without Javascript)</h1>
  <div class="acc-kontainer">
    <div>
      <input type="radio" name="acc" id="acc1" checked>
      <label for="acc1"><i class="fa fa-map-marker"></i> My name?</label>
      <div class="acc-body">
        Hi, You can call me Dandi.<br><br>
        <a href="https://www.google.com">Google</a>
      </div>
    </div>
    <div>
      <input type="radio" name="acc" id="acc2">
      <label for="acc2"><i class="fa fa-heart"></i> What am I interesting for?</label>
      <div class="acc-body">
        All the thing about Technology! Informatic technology especially.
      </div>
    </div>
    <div>
      <input type="radio" name="acc" id="acc3">
      <label for="acc3"><i class="fa fa-music"></i> What is my hobby?</label>
      <div class="acc-body">
        i love music <i class="fa fa-headphones"></i>, watching movie <i class="fa fa-film"></i>, Designing maybe <i class="fa fa-code"></i>
      </div>
    </div>
  </div>
</body>

</html>

但是，当我向“答案”添加超链接时，它们会落在展开框之外。该<a>元素在内部，<div>但由于某种原因它仍位于 div 元素之外。

如果我为元素添加样式<a>并让它继承所有内容，那么它会起作用。它继承了样式，但它仍然落在破坏这一切的 div 元素之外。

知道如何解决这个问题吗？

我需要它只与 CSS 一起使用。

标签： htmlcss

解决方案

只需添加overflow: hidden;到“封闭”手风琴样式 ( .acc-kontainer .acc-body)。见下文。

body {
  background-color: #c15236;
  font-family: 'Arial';
  padding: 2em 6em;
}

h1 {
  color: #fff;
  text-align: center;
}


/*--------Accordion-------*/

.acc-kontainer {
  width: 100%;
  margin: auto;
}

.acc-kontainer .acc-body {
  width: 98%;
  width: calc(100% - 20px);
  margin: 0 auto;
  height: 0;
  color: rgba(0, 0, 0, 0);
  ;
  background-color: rgba(255, 255, 255, 0.2);
  line-height: 28px;
  padding: 0 20px;
  box-sizing: border-box;
  transition: 0.5s;
  overflow: hidden;
}

.acc-kontainer label {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
  padding: 15px;
  width: 100%;
  color: #fff;
  font-weight: 400;
  box-sizing: border-box;
  z-index: 100;
}

.acc-kontainer input {
  display: none;
}

.acc-kontainer label:before {
  font-family: 'FontAwesome';
  content: '\f067';
  font-weight: bolder;
  float: right;
}

.acc-kontainer input:checked+label {
  background-color: rgba(255, 255, 255, 0.15);
}

.acc-kontainer input:checked+label:before {
  font-family: 'FontAwesome';
  content: '\f00d';
  transition: 0.5s;
}

.acc-kontainer input:checked~.acc-body {
  height: auto;
  color: #fff;
  font-size: 16px;
  padding: 20px;
  transition: 0.5s;
}
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body>
  <h1>Pure HTML+CSS Accordion (Without Javascript)</h1>
  <div class="acc-kontainer">
    <div>
      <input type="radio" name="acc" id="acc1" checked>
      <label for="acc1"><i class="fa fa-map-marker"></i> My name?</label>
      <div class="acc-body">
        Hi, You can call me Dandi.<br><br>
        <a href="https://www.google.com">Google</a>
      </div>
    </div>
    <div>
      <input type="radio" name="acc" id="acc2">
      <label for="acc2"><i class="fa fa-heart"></i> What am I interesting for?</label>
      <div class="acc-body">
        All the thing about Technology! Informatic technology especially.
      </div>
    </div>
    <div>
      <input type="radio" name="acc" id="acc3">
      <label for="acc3"><i class="fa fa-music"></i> What is my hobby?</label>
      <div class="acc-body">
        i love music <i class="fa fa-headphones"></i>, watching movie <i class="fa fa-film"></i>, Designing maybe <i class="fa fa-code"></i>
      </div>
    </div>
  </div>
</body>

</html>

推荐阅读