Question

我正在尝试在我的代码中加入一个切换开关，但是当我这样做时，它无法保持其样式（即形状）。

以下是HTML代码：

%macro dummy(ds=,statements=);
data &ds.2;
  set &ds.;    
  &statements.
run;
%mend;

这是CSS：

<ul id="switch">
  <li class="on" id="ON"><a href="#">ON</a></li>
  <li class="off" id="OFF"><a href="#">OFF</a></li> 
</ul>

因此，ON标签位于OFF标签的顶部，而不是并排开关。请帮忙

Answer 1

默认情况下，

li（列表项）元素是块元素，除非另有说明，否则块元素将占用整个宽度。将其显示类型更改为inline / inline-block以将其显示在一行中：

#switch.li {
  display: inline-block;
}

工作示例：

＆＃13;

#switch {
  list-style: none;
}
#switch li {
  border: 1px solid #aaa;
  display: inline-block;
  width: 85px;
}
#switch li a {
  text-decoration: none;
  color: #08f;
}
.on {
  background: #aaa;
}

＆＃13;

<ul id="switch">
  <li class="on" id="ON">
    <a href="#">ON</a>
  </li>
  <li class="off" id="OFF">
    <a href="#">OFF</a>
  </li>
</ul>

＆＃13;

Answer 2

dominicbure说：好吧我刚刚发现bootrap CDN正在杀死交换机的样式。我如何克服这一点，因为我使用bootstrap

构建了页面

“您需要使用自己的CSS文档覆盖默认引导程序的CSS。”

除此之外，要修复开关按钮问题，您需要在开关课程中添加以下代码：

/* For On and Off Class */
float: left; 
margin: 3px;
padding: 3px;

希望它有效。

切换开关在HTML页面中丢失样式

2 个答案: