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代碼 –