Question

我是HTML和CSS的新手。我正在使用ImpactJS引擎，目前正在为我的网页游戏中的某些元素开发UI。我正在尝试添加一个输入框，并在游戏中的javascript文件中使用Jquery调用它。到目前为止，我已经完成了所有工作，但是当我尝试调整文本输入框并提交按钮进行修复而不是使用不同的屏幕分辨率进行更改时，但目前它似乎没有工作。输入框和提交按钮根据不同的屏幕分辨率更改其大小和宽度。下面是我的CSS文件

我也试过调查其他类似的论坛，并尝试将位置更改为绝对但不起作用。

    #problemdisplay {
        position: absolute;
        margin-top: 10%;
        width: 100%;
    }
    #problemform {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        padding: 280px 2px 15px 400px;
    }
    #probleminput {
        display: none;
        width: 45%;
        margin-left: 5.5%;
        margin-right: 5.5%;
        padding: 35px 5px 15px 20px;
    }
    #problemsubmit {
        display: none;
        width:5%;
        padding: 15px 10px 8px 2px;
    }
    #prob_submit_msg {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    #canvaswrapper {
        margin: 15px;
        position: relative;
    }
    #canvas {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

非常感谢任何帮助。

Answer 1

如果你想要调整它的中心，让它变得简单让我们假设你的div的高度是300px而宽度是400px你需要做的就是：

position:absolute;
margin-top:-150px;
margin-left:-200px;
top:50%;
left:50%;

这将完成这项工作，它会根据每个屏幕分辨率调整div为中心。

Answer 2

使用像素值设置width和height按钮的input submit

<input type="button" class="submit" value="submit"/>

的CSS：

.submit
{
    width: 100px;
    height: 50px;
}

Answer 3

您的问题是您使用的是％widths。这将使输入和提交按钮重新调整大小，具体取决于持有它们的容器的大小。

要解决此问题，请更改要以像素值设置的宽度。这将使它们成为指定的宽度，无论如何。

例如：http://jsfiddle.net/6yHrK/

HTML：

<input class="percent">
<br>
<input class="pixel">

CSS：

input.percent {
    width: 50%;
}
input.pixel {
    width: 250px;
}

Answer 4

您在提交/输入的width属性中使用百分比。根据文档“”％定义包含块的宽度百分比“。尝试使用固定值（例如10px; 1em）并查看它是如何进行的。

Answer 5

这会将元素中心与页面对齐，

margin : 0 auto;

CSS对齐以适应不同的屏幕分辨率

5 个答案: