Android徽标的左臂不可见

Question

我正在学习通过The Odin Project编写代码。我正在尝试使用http://thecodeplayer.com/walkthrough/css3-android-logo

中的HTML CSS3重新创建Android徽标

他们的练习代码位于上述链接中。

然而，我似乎无法看到左臂。我试过了：  1. Chrome  2. Firefox

<div class="android">
    <div class="head">
        <div class="l_ant"></div>
        <div class="r_ant"></div>
        <div class="l_eye"></div>
        <div class="r_eye"></div>

    </div>
    <div class="body">
        <div class="l_arm"></div>
        <div class="r_arm"></div>
        <div class="l_leg"></div>
        <div class="r_leg"></div>

    </div>

</div>

CSS

div {
margin: 0;
padding: 0;
}

div div {
background: #a4ca39;
position: relative;
}

.adroid {
height: 404px;
width: 334px;
margin: 100px auto;
}

.head {
width: 220px;
height: 100px;
top: 32px;
border-radius: 110px 100px 0 0;
}

.l_eye, .r_eye {
background: #fff;
width: 20px;
height: 20px;
position: absolute;
top: 42px;
}

    .l_eye {
left: 50px;
}

.r_eye {
right: 50px;
}

.l_ant, .r_ant {
width: 6px;
height: 50px;
position: absolute;
top: -34px;
border-radius: 3px;
}

.l_ant {
left: 50px;
text-transform: rotate(-30deg);
}

.r_ant {
right: 50px;
text-transform: rotate(30deg);
}


.body {
width: 220px;
height: 184px;
top: 40px;
border-radius: 0 0 25px 25px;
}


    .l_arm {
    width: 50px;
    position: absolute;
}

    .r_arm, .l_leg, .r_leg {
    width: 50px;
    position: absolute;
}

    .l_arm {
    height: 150px;
    border-radius: 25px;
}

    .r_arm {
    height: 150px;
    border-radius: 25px;

}

    .l_leg, .r_leg {
    height: 80px;
    top: 182px;
    border-radius: 0 0 25px 25px;
}

    .l_arm {
    left: -58px;
}

    .r_arm {
    right: -58px;
}

    .l_leg {
    left: 45px;
}

    .r_leg {
    right: 45px;
}

Answer 1

看起来您的.l_arm类设置为left:-58px，将其从屏幕左侧推出58像素。尝试将其更改为left:0，并将每隔一个div移位58像素。由于页面上没有其他内容，position:absolute上.l_arm的（x，y）原点位于（0,0），这意味着您将left设置为负值它将出现在屏幕外。