当我在左边距或右边距中写入一个百分值时，它不起作用，而且当我写入px时也会溢出。
.badgescard {
padding: 1px 2px;
border-radius: 3px;
background-color: #00bcd4;
color:#fff;
width: auto;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
margin-left: %10;
z-index: -1;
margin-right: %10;
bottom: 10px;
animation: animainfos 0.5s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s forwards;
}
如果需要，我添加所有CSS代码
<style>
@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400";
.badgescard,
.firstinfo {
display: flex;
justify-content: center;
align-items: center;
}
html {
height: 100%;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.contentz {
position: relative;
animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}
.card {
width: %8;
min-height: 100px;
padding: 10px;
border-radius: 3px;
background-color: white;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.card:after {
content: '';
display: block;
width: 190px;
height: 300px;
background: cadetblue;
position: absolute;
animation: rotatemagic 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;
}
.badgescard {
padding: 1px 2px;
border-radius: 3px;
background-color: #00bcd4;
color:#fff;
width: auto;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
margin-left: %10;
z-index: -1;
margin-right: %10;
bottom: 10px;
animation: animainfos 0.5s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s forwards;
}
.badgescard span {
font-size: 1.6em;
margin: 0px 6px;
opacity: 0.6;
}
.firstinfo {
flex-direction: row;
z-index: 2;
position: relative;
}
.firstinfo img {
border-radius: 50%;
width: %100;
height: 120px;
}
.firstinfo .profileinfo {
padding: 0px 20px;
}
.firstinfo .profileinfo h1 {
font-size: 1.8em;
}
.firstinfo .profileinfo h3 {
font-size: 1.2em;
color: #00bcd4;
font-style: italic;
}
.firstinfo .profileinfo p.bio {
padding: 10px 0px;
color: #5A5A5A;
line-height: 1.2;
font-style: initial;
}
@keyframes animatop {
0% {
opacity: 0;
bottom: -500px;
}
100% {
opacity: 1;
bottom: 0px;
}
}
@keyframes animainfos {
0% {
bottom: 10px;
}
100% {
bottom: -42px;
}
}
@keyframes rotatemagic {
0% {
opacity: 0;
transform: rotate(0deg);
top: -24px;
left: -253px;
}
100% {
transform: rotate(-30deg);
top: -24px;
left: -78px;
}
}
</style>
答案 0 :(得分：-1)
应该是
margin-right: 10%;
否
margin-right: %10;