2
我没有那么多的HTML经验，我想用一个设计的单选按钮。 所以，我使用这些代码从一个网站，并修改它一点点。 现在的问题是每当我在标签中写一个句子时，它不会出现在同一行中。单选按钮和标签
你知道为什么会这样吗？
下面是码
html {
font-family: "Segoe UI";
}
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
font-family: 'Raleway', Arial, sans-serif;
}
.toggle-button {
position: relative;
display: inline-block;
color: black;
margin: 0 20px;
}
/*tested*/
.toggle-button label {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
text-align: left;
}
/*tested*/
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
/*to let radio button invites clicking*/
.toggle-button__icon:before, .toggle-button__icon:after {
content: "";
position: absolute;
transition: 0.200s ease-out;
}
/*to make radio button clickable*/
.toggle-button--maa label {
width: 110px; /*space between the options*/
height: 20px;
line-height: 20px; /*line spacing*/
transition: all 0.2s;
}
.toggle-button--maa label:before, .toggle-button--maa label:after {
position: absolute;
top: 0;
left: 30px;
width: 110px;
transition: all 0.2s .1s ease-out;
}
.toggle-button--maa label:before {
content: attr(data-text);
}
.toggle-button--maa input:checked ~ .toggle-button__icon:before {
animation: wave .7s ease-out;
}
.toggle-button--maa input:checked ~ .toggle-button__icon:after {
transform: scale(1);
animation: zoomIn .2s;
}
.toggle-button--maa .toggle-button__icon {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--maa .toggle-button__icon:before, .toggle-button--maa .toggle-button__icon:after {
border-radius: 50%;
}
.toggle-button--maa .toggle-button__icon:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
}
.toggle-button--maa .toggle-button__icon:after {
top: 4px;
left: 4px;
width: 60%;
height: 60%;
background: #61B136;
animation: zoomOut .2s ease-out;
transform: scale(0);
transition: none;
}
.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon {
animation: hover .2s;
}
.toggle-button--maa:hover input:not(:checked) ~ label:before {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
@keyframes zoomOut {
0% {
transform: scale(1);
}
30% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
@keyframes zoomIn {
0% {
transform: scale(0);
}
90% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes wave {
0% {
opacity: 1;
transform: scale(1);
}
40% {
opacity: 0.2;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
@keyframes zoomFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes zoomFadeIn {
0% {
opacity: 0;
transform: scale(3);
}
90% {
opacity: 1;
transform: scale(1);
}
100% {
transform: scale(1);
}
}
@keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}<div id="ButtonsDiv" class="auto-style4" >
<div class="toggle-button toggle-button--maa">
<input id="toggleButton7" name="radio3" type="radio"/>
<label for="toggleButton7" data-text="Bachelor accounting student" ></label>
<div class="toggle-button__icon"></div>
</div>
<div class="toggle-button toggle-button--maa">
<input id="toggleButton8" name="radio3" type="radio"/>
<label for="toggleButton8" data-text="Bachelor finance student" class="auto-style5"></label>
<div class="toggle-button__icon"></div>
</div>
</div>
它的工作原理！谢谢:) –
我的荣幸;）祝你好运。 –
还有一件事情，正如我所说的所有从网站上复制的这些代码一样，我尽可能多地试图弄清楚什么是不需要删除它的代码。我删除了一些。但是，我认为有更多的代码是不必要的。你怎么看 ？我的意思是CSS代码 –