我正在尝试为我的网站编写一个简单的 404(找不到页面)错误页面:bazingamanphdgaming.t15.org。到目前为止,这是我的代码:
<html>
<head>
<title>404 - Not found</title>
<style>
#title {
position:fixed;
top:40%;
color:white;
font-size:40px;
text-align:center;
width:100%
}
#link {
position:fixed;
top:45%;
font-size:20px;
text-align:center;
width:100%
}
</style>
</head>
<body style="background-color:black">
<div id="title"><b>404 - Page not found</b></div>
<div id="link"><br />
<a style="color:white" href="http://bazingamanphdgaming.t15.org">
Return to the BazingaManPHD Gaming home page.
</a>
</div>
</body>
</html>
但是,当我减小浏览器窗口的宽度时,#title 中的粗体文本会越过返回主页的链接。这是截图:
当然要解决这个问题,我需要像这样在#title 上放置一个最小宽度属性:
<div id="title" style="min-width:200px"><b>404 - Page not found</b></div>
我在那里使用 200px 作为示例,但无论我将其设置为什么大小,它都不起作用。任何帮助将不胜感激。
最佳答案
只需将其添加到您的 CSS 中:
#title {
white-space: nowrap;
/* rest of your styles */
}
这将防止 #title
中的文本换行。
关于css - 居中 <div> CSS 和 HTML 的最小宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27639845/