0

ここに画像の説明を入力開発中に、次のcssプロパティを宣言したとしましょう

.buttons-pos {
    /*margin: 0px 20px;*/
    padding: 10px;
    display:inline-block;
    overflow:hidden;
    height:20px;
    position: relative;
    right:-550px;
    background-color: #E6E6E6;
    position: relative;
    text-align: justify;
    border: 1px solid;
    border-color: #E6E6E6;
    border-radius: 3px;

}

2 つの青いボタンの css:

  .checksheet {
    /*margin: 0px 20px;*/
    left: 400px;
    top: 45px;
    position: relative;

}
  .nchecksheet {
    /*margin: 0px 20px;*/
    left: 680px;
    top:2px;
    position: relative;

}

これは私のコンピューターでは問題ないように見えますが、他のコンピューターで確認すると、位置がすべてめちゃくちゃになっていますか?

この問題を解決する方法は何ですか?

添付のスクリーンショット。灰色のバーは無視してください...とりあえず..

あなたが見る青いボタン..それは私のラップトップの画面の中央にあります..

しかし、ここでは..左にシフトしています。

これをラップトップで見ると..青いボタンは画面の中央にありますが、灰色のバーは右にずれています..

4

1 に答える 1

1

私はあなたのコードを詳しく調べませんでしたが、あなたの問題はほぼ間違いなく、位置と寸法をピクセル単位でハードコーディングしているためです。高解像度のデバイスでデザインし、後で低解像度のデバイスで確認すると、レイアウトが乱れていることがわかります。

ページを流動的にしたい場合は、ページのレイアウトにパーセンテージを使用する必要があります。

ニーズにより適した別のソリューションは、最小公分母を考慮して設計することです。これは基本的に、この場合、ページを表示する最低解像度を決定し、その解像度用に設計し、他の解像度用にページを中央に配置することを意味します。

于 2013-03-07T19:57:15.473 に答える