Question

我正在使用Google App Engine开发我的第一个Web应用程序。现在，虽然核心后端程序正在运行并准备就绪，但我在使用网站的UI时遇到了一些麻烦。现在，我的网站的宽度超出了我不想要的给定屏幕。

您可以在此处查看该网站的实时版本：

http://deploymentapp.appspot.com/

现在，该网站仍处于开发阶段，请原谅我在网页设计方面的可怕尝试。

从网站上可以看出，整个网站的宽度超出了网屏宽度。

这是HTML代码：

<html>
<head>
<title>Live Quora Feed</title>
<style type = "text/css">
*
{
    margin:0px;
    padding:0px;
}

body
{
    width:100%;
    background-image: url("http://www.bluelinerny.com/wp-content/uploads/2011/03/quora_illustration_1.jpg");
    background-position: top center;
    background-repeat:no-repeat;
}

input.button {
width:40px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background:#fff;
color:#09C;
}
orm has no structure, no color, and no personality. We can change that with a little bit of code. First, we are going to style the form tag itself.


form    {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

input    {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0.1, 0.3);
}

#form
{
position:relative;
left:730px;
top:300px;
}
</style>

</head>
<body bgcolor = "black">
<div id = "form">
<form method = "post">
<div>

<label>
<span>Enter your query</span><input id="name" type="text" name="rssquery" />
</label>
<input type="submit" value="Submit Form" />
</div>
<div class="text">
    <p>This is some demonstration text</p>
    <p>This is some more wonderful text</p>
  </div>
</div>
</form>    
</body>
</html>

另外，我从其他来源复制了大部分CSS。

如何解决这个问题？

Answer 1

您需要将css变为响应。
不要在 #form 中使用 px ，只需像这样使用％：

#form {
  margin-top:300px;

  margin-left:55%;
}

有一种更好的方法可以获得相同的结果。浮动表格向右并设置右边距。

#form {
  float:right;
  margin-right:15%

  margin-top:300px;
}

如果你想从这个链接开始阅读更多内容，那么响应的背后还有更多内容：http://learn.shayhowe.com/advanced-html-css/responsive-web-design

Answer 2

您的问题在于#form。

您的left并不总是合适的金额。

您需要使用％而不是px。

这称为响应式网页设计。

如果你想要它不妨碍quora标志，我似乎通过改变左边50％来修复它

screencapture

网站不适合给定的屏幕宽度

2 个答案: