0

（见下面的更新）

我有两个文件：一个 .css 文件和一个 index.html 文件。这个想法是在屏幕上有一个按钮面板[用于原型设计触摸屏界面的可用性]，每个按钮在屏幕上分配一个特定位置（参见 .css 文件中的“margin-top”和“margin-left”标签. 稍后我将添加 onclick 功能等。

不过现在，我只是想让它们在屏幕上正确显示。奇怪的是，.css 部分中的第一个元素（即 .aButton #....）在浏览器中显示时始终显示在位置 (0,0) 处。例如。目前，button1 将在 (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;
}

更新：用整个 html 和 css 文件更新了 Fr0zenFyr 的 jsfiddle 并得到了相同的问题！http://jsfiddle.net/b4NYd/ 我以前不包括它们是愚蠢的，因为我现在怀疑它与 .aButton #buttonx {} 定义与 #buttonx {} 定义的奇怪交互有关. 我可以通过合并两者来解决问题，但我真的很想了解为什么会出现这种问题，因为我想稍后在制作不同布局的原型时使用不同的类。

更新：全部排序！这是我的评论，啊！

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？您是否将元素设置为 inline-block，或者正如 btevfik 所提到的，您是否在元素上使用了任何定位？您是否稍后在您的 css 文件中覆盖您的按钮 css？

其他地方肯定有其他问题导致您的按钮在屏幕上移动。

于 2013-03-22T10:21:16.447 回答