Question

我想显示许多文本块，首先只显示标题和几行，然后单击“更多”标签后将其全部显示或再次隐藏。我使用了隐藏复选框和标签的CSS技巧，看起来几乎是正确的。

label {
        width: 50%;
    	border-radius: 5px;
    	background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(0,0,128,0.7) 100%);
    	cursor: pointer;
    }
    label:after {
        content: "see more...";
        margin-left: 1%;
        font-style: italic;
        font-weight: bold;
        font-size: smaller;
    }
    .lbl1 {
    	// display:inline-block;
        padding-top: 40px;
    	color: white;
        font-style: italic;
    }
    input[id^="more"] {
        display: none;
    }
    input[id^="more"]:checked ~ .lbl1:after {
        content: "show less";
    }
    input[id^="more"]:checked ~ .arttxt1{
        height: 100%;
    }
    .arttxt1{
    	margin-left:1%;
    	width: 50%;
    	margin-bottom:2px;
    	line-height: 2.5ex;
    	height: 8.4ex; /* 2.5ex for each visible line */
        overflow: hidden;
    }

<article>
  <h1>De regels</h1>
  <input id='more20' type='checkbox'/>
  <div class='arttxt1'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <label for='more20' class='lbl1'>&nbsp;</label>
</article>

要单击的标签仅具有文本的宽度，而我希望在整个宽度上进行打点。搜索建议添加“ display：inline-block”，我这样做了。它确实使标签延伸了整个宽度，但我也失去了透明度：它有点像位于文本前面。我尝试了搜索，但找不到合适的解决方案。希望有人能帮助我。

Answer 1

这是您想要的效果吗？使用负边距将div上移

label {
  width: 50%;
  border-radius: 5px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0%, rgba(0, 0, 128, 0.7) 100%);
  cursor: pointer;
}

label:after {
  content: "see more...";
  margin-left: 1%;
  font-style: italic;
  font-weight: bold;
  font-size: smaller;
}

.lbl1 {
  display: inline-block;
  padding-top: 40px;
  color: white;
  font-style: italic;
  margin-top: -40px;
  padding-left: 1%;
}

input[id^="more"] {
  display: none;
}

input[id^="more"]:checked~.lbl1:after {
  content: "show less";
}

input[id^="more"]:checked~.arttxt1 {
  height: 100%;
}

.arttxt1 {
  margin-left: 1%;
  width: 50%;
  margin-bottom: 2px;
  line-height: 2.5ex;
  height: 8.4ex;
  /* 2.5ex for each visible line */
  overflow: hidden;
}

<article>
  <h1>De regels</h1>
  <input id='more20' type='checkbox' />
  <div class='arttxt1'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <label for='more20' class='lbl1'>&nbsp;</label>
</article>

Answer 2

为澄清起见，它不会失去透明度-实际发生的是，因为您的<div class="arttxt1">是一个块元素，所以标签被向下推到文本下方。

这样，您可以按照Chris Li的回答使用margin-top，也可以使用position:relative和top将标签向上推到文本上方。

label {
        width: 50%;
    	border-radius: 5px;
    	background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(0,0,128,0.7) 100%);
    	cursor: pointer;
    }
    label:after {
        content: "see more...";
        margin-left: 1%;
        font-style: italic;
        font-weight: bold;
        font-size: smaller;
    }
    .lbl1 {
    	display:inline-block;
        padding-top: 40px;
    	color: white;
        font-style: italic;
        position:relative;
        top: -40px;
    }
    input[id^="more"] {
        display: none;
    }
    input[id^="more"]:checked ~ .lbl1:after {
        content: "show less";
    }
    input[id^="more"]:checked ~ .arttxt1{
        height: 100%;
    }
    .arttxt1{
    	margin-left:1%;
    	width: 50%;
    	margin-bottom:2px;
    	line-height: 2.5ex;
    	height: 8.4ex; /* 2.5ex for each visible line */
        overflow: hidden;
    }

<article>
  <h1>De regels</h1>
  <input id='more20' type='checkbox'/>
  <div class='arttxt1'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <label for='more20' class='lbl1'>&nbsp;</label>
</article>

内联块的不透明度

2 个答案: