"phone"の書式設定が機能しない

Question

現在、html/css/javascriptを使用した最初のchrome拡張機能を開発中です。私は問題があり、今のところstackoverflowの質問のどれも私の問題に答えていないようです。

私はiPhoneのように電話機のようなレイアウトをしています。基本的に、homepage-bottom ID divのボタンが正しく機能していません。 homepage-bottom-inside ID div（色は黒）ラウンドが欲しいです。

現在、このようになっています。

私のエラーを説明し、コードを修正してください。

#homepage-bottom-content { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    height: 50px; 
 
    padding-top: 10px; 
 
    width: 50px; 
 
    background-color: black; 
 
    border-radius: 100px; 
 
} 
 
#homepage-bottom-content-inside { 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: black; 
 
    border: #E6E6E6 2px solid; 
 
    border-radius: 7.5px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<div id="homepage-bottom"> 
 
    <div id="homepage-bottom-content"> 
 
    <div id="homepage-bottom-content-inside"></div> 
 
    </div> 
 
</div>

EXTRA

これは、全体の "電話" がどのように見えるかです。

#homepage { 
 
    margin: auto; 
 
    height: 620px; 
 
    width: 330px; 
 
    background-color: lightblue; 
 
    border-radius: 40px; 
 
    border: black 7px solid; 
 
} 
 
#homepage-content { 
 
    margin: auto; 
 
    height: 470px; 
 
    cursor: cell; 
 
    width: 270px; 
 
    background-color: white; 
 
    border-radius: 7.5px; 
 
    border: 3px black solid; 
 
} 
 
#homepage-bottom-content { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    height: 50px; 
 
    padding-top: 10px; 
 
    width: 50px; 
 
    background-color: black; 
 
    border-radius: 100px; 
 
} 
 
#homepage-bottom-content-inside { 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: black; 
 
    border: #E6E6E6 2px solid; 
 
    border-radius: 7.5px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<div id="homepage"> 
 
    <div id="homepage-top"> 
 
    <div id="homepage-top-content"> 
 
     <div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div> 
 
     <div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div> 
 
    </div> 
 
    </div> 
 
    <div id="homepage-content"> 
 
    </div> 
 
    <div id="homepage-bottom"> 
 
    <div id="homepage-bottom-content"> 
 
     <div id="homepage-bottom-content-inside"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

padding-top全高の一部であるので、+ padding-top:10pxheight:40pxはhomepage-bottom-contentためにそれをしません。

borderの厚さも合計高さの一部であることに注意してください。

#homepage-bottom-content { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
    width: 50px; 
 
    background-color: black; 
 
    border-radius: 100px; 
 
} 
 
#homepage-bottom-content-inside { 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: black; 
 
    border: #E6E6E6 2px solid; 
 
    border-radius: 7.5px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<div id="homepage-bottom"> 
 
    <div id="homepage-bottom-content"> 
 
    <div id="homepage-bottom-content-inside"></div> 
 
    </div> 
 
</div>

エクストラ

お使いの携帯電話が固定：

#homepage { 
 
    margin: auto; 
 
    height: 620px; 
 
    width: 330px; 
 
    background-color: lightblue; 
 
    border-radius: 40px; 
 
    border: black 7px solid; 
 
} 
 
#homepage-content { 
 
    margin: auto; 
 
    height: 470px; 
 
    cursor: cell; 
 
    width: 270px; 
 
    background-color: white; 
 
    border-radius: 7.5px; 
 
    border: 3px black solid; 
 
} 
 
#homepage-bottom-content { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
    width: 50px; 
 
    background-color: black; 
 
    border-radius: 100px; 
 
} 
 
#homepage-bottom-content-inside { 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: black; 
 
    border: #E6E6E6 2px solid; 
 
    border-radius: 7.5px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<div id="homepage"> 
 
    <div id="homepage-top"> 
 
    <div id="homepage-top-content"> 
 
     <div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div> 
 
     <div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div> 
 
    </div> 
 
    </div> 
 
    <div id="homepage-content"> 
 
    </div> 
 
    <div id="homepage-bottom"> 
 
    <div id="homepage-bottom-content"> 
 
     <div id="homepage-bottom-content-inside"></div> 
 
    </div> 
 
    </div> 
 
</div>