0

(以下の更新を参照)

.css ファイルと index.html ドキュメントの 2 つのファイルがあります。アイデアは、[タッチスクリーン インターフェイスの使いやすさのプロトタイピング用] 画面上にボタンのパネルを配置し、各ボタンに画面上の特定の位置を割り当てることです (.css ファイルの「margin-top」タグと「margin-left」タグを参照)。後で onclick 機能などを追加します。

今のところ、画面に正しく表示されるようにしようとしています。奇妙なことに、.css 部分の最初の要素 (.aButton #....) は、ブラウザに表示されると常に (0,0) の位置に表示されます。例えば。現時点では、ボタン 1 は (0,0) にありますが、他のすべてのボタンは正しい場所にあります。CSS コードを変更し、button2 セクションを button1 セクションの上に移動すると、button1 は正しい場所にレンダリングされますが、button2 は現在 (0,0) にあります。

どんなアイデアにもとても感謝しています！

関連する部分は次のとおりです。 index.html から

<div id="buttonPanel" class="aButton">
            <div id="button1" class="aButton"></div>
            <div id="button2" class="aButton"></div>            
            <div id="button3" class="aButton"></div> 
            <div id="button4" class="aButton"></div>
            <div id="button5" class="aButton"></div>
</div>

styles.css から:

.aButton #button1
{
    margin-top: 262px;
    margin-left: 110px;
}

.aButton #button2
{
    margin-top: 24px;
    margin-left: 347px;
}

.aButton #button3
{
    margin-top: 32px;
    margin-left: 114px;
}

.aButton #button4
{
    margin-top: 524px;
    margin-left: 104px;
}
.aButton #button5
{
    margin-top: 392px;
    margin-left: 106px;
}

更新: Fr0zenFyr の​​ jsfiddle を html ファイルと css ファイル全体で更新すると、同じ問題が発生します! http://jsfiddle.net/b4NYd/ .aButton #buttonx {} 定義と事前に奇妙に相互作用する .aButton #buttonx {} 定義と関係があると思われるため、以前に両方を含めなかったのはばかげていました. 2つをマージすることで問題を解決できますが、後で別のレイアウトをプロトタイプ化するときに別のクラスを使用したいので、この種の問題が発生する理由を本当に理解したいと思います。

更新：すべてソートされました！それは私のコメントでした。

4

2 に答える 2

1

問題はあなたのコメントです。css でのコメントの書き方ではありません。/*表記を使用する必要があります。

これを行う

 /* interface 1 */
 /* need to change all of these according to what numbers I've got in my logbook.*/
于 2013-03-22T09:26:47.023 に答える
1

あなたの場合、CSS の順序を移動しても、HTML 要素の出力には影響しません。ボタンのすべての css クラスの順序を逆にすることができますが、それは何にも影響しません。

他の CSS をオーバーライドしましたか? おそらく要素をインラインブロックに設定しましたか、またはbtevfikが触れたように、要素に何らかの配置を使用していますか? css ファイルの後半でボタン css を上書きしていますか?

ボタンが画面上を移動する原因となる他の問題が他にあるはずです。

于 2013-03-22T10:21:16.447 に答える