0

私は現在、自分のウェブサイトのヘッダーを書いていますが、助けてくれる友人がいます。私たちは 2 台の非常に異なるコンピューター (PC と Mac) を使用し、異なるブラウザーを使用して、マルチプラットフォームとすべてのものであることを確認しましたが、ヘッダーが彼の画面に収まらないことがわかりました。そのため、ウィンドウの幅を取得し、それを 4 で割ってボタンのサイズにする方が簡単であることに気付きました。どうすればこれを行うことができますか？

本当にありがとう！

編集：これが私が使用しているものです：

    div.horizontal
{
    position: relative;
    width: 100%;
    height:45px;
}   

div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
} 

div.horizontal li
{
float:left;
}

div.horizontal a
{
display:block;
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 52%, rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(52%,rgba(255,255,255,0.10)), color-stop(100%,rgba(255,255,255,0))), url("../img/truefactzheader.png");
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );
width:25%;
height:35px;
}

div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

div.horizontal a:hover,div.horizontal a:active
{
height:45px;
background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0.25))), url("../img/truefactzheader.png");
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: -o-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: -ms-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: linear-gradient(to bottom,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#99000000',GradientType=0 );
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
}
4

1 に答える 1

3

ヘッダー要素が画面の 100% 幅で、ボタンを同じ幅にしたい場合、計算は > 100 / 4 = 25% になるはずです。各ボタンは、ヘッダーの幅の 25% を占める必要があります。

したがって、CSS では次のように定義する必要があります。

#my_header {
    width: 100%;
    float: left;
}
    #my_header a.button {
        display: block;
        float: left;
        width: 25%;
        height: 30px
    }

このjsFiddle デモを参照してください。

したがって、次のようにコードを更新する必要があります (わかりやすくするために、ブラウザー固有のプロパティを取り出しました。

div.horizontal {
    position: relative;
    width: 100%;
    height:45px;
}   

div.horizontal ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
} 
div.horizontal li {
    float: left;
    width: 25%;
}

div.horizontal a {
    display: block;
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
    height:35px;
}
于 2013-03-09T21:43:55.043 に答える