CSS - 右側多餘的空間

 
* { 
    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上看，它看起來很不錯，除了右邊有多餘的空間。我怎樣才能解決這個問題？CSS - 右側多餘的空間

來源

2011-05-24 Imnotanerd

很難分辨。難道是'bg.png'對於設備寬度來說太小了嗎？ – 2011-05-24 01:55:57

您可以提供實時鏈接或在jsfiddle.net上提供示例 – Dan 2011-05-24 05:01:49

http://switch.tk/ < - 在桌面上查看，然後在iPhone/iPOd Touch上查看。不，bg.png是一個完美的尺寸，因爲在添加pre {}之前它完全適合。 – Imnotanerd 2011-05-26 00:40:06

我認爲你的「標籤」後面有一些標籤或空格。您還應該在標籤元素中包含文本。

你可能有什麼：

<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-element通常用於輸出代碼。

來源

2011-05-27 21:37:49 martnu

CSS - 右側多餘的空間

回答

相關問題