右侧存在过多空白间隙

Question

* {
  margin: 0;
  border: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: none;
}
body {
  background: #474747 url(bg.png);
}
h1 a {
  display: block;
  text-decoration: none;
  font: 40px Helvetica, Arial, Sans-Serif;
  letter-spacing: -5px;
  text-align: center;
  color: #a0a0a0;
  text-shadow: 0px 5px 8px #2a2a2a;
}
h2 {
  font: 30px Tahoma, Helvetica, Arial, Sans-Serif;
  text-align: center;
  color: #222;
  text-shadow: 0px 2px 3px #555;
}
div#mobile pre {
  width: 275px;
  margin: 0 auto;
  background: #222;
  padding: 10px;
  font-size: 20px;
  color: #555;
  text-shadow: 0px 2px 3px #171717;
  -webkit-box-shadow: 0px 2px 3px #555;
  -webkit-border-radius: 20px;
}

我正在为iPhone优化我的网站，目前进展顺利，但是在iPhone/iPod touch上查看时，右侧有多余的空间。如何解决这个问题？

- Imnotanerd

---

很难说。bg.png 的宽度可能太小了，无法适应设备的宽度？ - Jason Gennaro

你能提供一个实时链接或在jsfiddle.net上放一个示例吗？ - Dan

http://switch.tk/ <- 在桌面电脑上和 iPhone/iPod Touch 上查看。不，bg.png 的大小是完美的，因为在添加 pre {} 之前它已经完美地适配了。 - Imnotanerd

在这里，添加无关的回答来“顶”你的问题是不可接受的行为。如果你想引起注意，你可以在两天后为它设置赏金。你也可以编辑你的问题添加额外的信息，这可能会使你的问题更容易理解和回答。 - user1228

Answer 1

我想你的“标签”后面可能有一些制表符或空格。你还应该在标签元素中添加文本。

你可能有的：

<pre> <form method="post" action="/index.php">Enter a URL<br />(WITH THE http://):               <br /><input type="text" name="url"> 
<br />Want a custom tag?                    <br /><input type="text" name="custom"> 
</form> 
No URL was entered.</pre>

你需要具备以下技能：

<form method="post" action="/index.php">
  <label for="url">
    Enter a URL (WITH THE http://):
  </label>
  <input type="text" name="url"> 
  <label for="custom">
    Want a custom tag?
  </label>
  <input type="text" name="custom"> 
</form> 
<p>No URL was entered.</p>

然后您需要对其进行样式设置，使其看起来与以前相同。请记住pre元素通常用于输出代码。

- martnu