Android徽標的左臂不可見

Question

我正在學習通過The Odin Project進行編碼。我試圖重新創建使用HTML CSS3的Android徽標http://thecodeplayer.com/walkthrough/css3-android-logo

練習中的代碼位於上述鏈接上。

但是，我似乎無法看到左臂。我已經試過： 1.鉻 2.火狐

<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向右移位。由於頁面上沒有其他內容，所以的.l_arm在（0,0）處具有（x，y）原點，這意味着如果將left設置爲負值，它將顯示在屏幕外。