Question

我正在asp.net店面的着陆页上工作，并希望添加可扩展内容。我已经被告知我应该使用内联样式 - 而不是内部样式表，并且因为css中有psuedo样式，所以当我内联它时，我无法扩展我的内容。

有关如何使用内联样式创建可扩展内容的选项吗？

＆＃13;

/* Accordian Items */
.collapse {
	text-align:left;
}

.collapse > * + *{
  display:none;
  
 }
.collapse > *{
  cursor:pointer;
  }
  
.collapse:focus{
  outline:none;
}
.collapse:focus > * + *{
  display:block; 
}

.accordian-cta {
	width:20%;
	float: right;
	vertical-align:middle;
	text-align:right;
}

.accordian-title {
	width:100%;
	max-width:1000px;
	
	text-indent:10px;
	margin-bottom:10px;
	color:rgb(71,70,70);
	font-size:1.17em;
	font-family:arial, verdana, sans-serif;
	font-weight:bold;
	padding:5px;

＆＃13;

<div class="collapse" tabindex="3">
     <div class="accordian-title">Click to expand<div class="accordian-cta">+&nbsp;</div> </div>
     <div class="accordian-text">
     [EXPANDED CONTENT HERE]

     
     </div>
  </div>

＆＃13;

Answer 1

你不能使用内联css，但恕我直言，没有必要以这种方式限制你的代码。这是纯css中的另一个示例，使用类型为checkbox的输入：

＆＃13;

#expand {
  display: none;
}
#toggle:checked ~ #expand {
  display: block;
}

＆＃13;

<input id="toggle" type="checkbox" checked>
<label for="toggle">Hide/Show</label>
<p id="expand">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

＆＃13;

它与您的代码的不同之处在于，在失去焦点时不切换内容，这更加稳定＆＃34;对于用户。

您可以添加更多css来进行高度转换，而不是粗暴＆＃34;显示/不显示＆＃34;，或者以更加时尚的方式设置复选框样式，例如here。< / p>

有关css选择器here的更多信息。

我可以使用inline-css制作可扩展内容吗？

1 个答案: