带有空格且未对齐的 HTML 页面-6ren

带有空格且未对齐的 HTML 页面

转载作者：行者123 更新时间：2023-11-28 09:02:34

27

4

我目前正在开发一个基本的网页。但是我的布局有一些基本问题。我会在我的菜单下方留下很多空白，无论我做什么，我的网站都不会与页面中心对齐。我添加了我的页面和css样式页面

html页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lierse Liga</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div align="center">
<div class="wrapper">
<header>
<h1>Lierse Liga</h1>
    <nav>
    <ul class="menu">
        <li><a class="button" href="index.html">Home</a></li>
        <li><a class="button" href="eersteklasse.html"><img src="bal.gif" id="img1" />Eerste Klasse</a></li>
        <li><a class="button" href="tweedeklasse.html">Tweede Klasse</a></li>
        <li><a class="button" href="contact.html">Contact</a></li>
    </ul>
    </nav> 
</header>
</div>
<div class="page">
<table><tr><td>
<table>
    <tr>
        <td colspan=2><h3>Wedstrijden Maandag</h3></td>
    </tr>
    <tr>
        <td><p>19h</p></td><td><p>Turkse Rangers - Sinte Goemmer</p></td><td><p>0-0</p></td>
    </tr>
    <tr>
        <td colspan=2><h3>Wedstrijden Woensdag</h3></td>
    </tr>
    <tr>
        <td><p>19h</p></td><td><p>Turkse Rangers - Sinte Goemmer</p></td><td><p>0-0</p></td>
    </tr>
    <tr>
        <td colspan=2><h3>Wedstrijden Vrijdag</h3></td>
    </tr>
    <tr>
        <td><p>19h</p></td><td><p>Turkse Rangers - Sinte Goemmer</p></td><td><p>0-0</p></td>
    </tr>
</table>
</td>
<td><hr width="1" size="400"></td>
<td>
<table>
<tr>
    <td colspan=10><h3>Klassement</h3></td>
</tr>
<tr>
    <td>Nr.</td><td>Ploeg</td><td>#wed.</td><td>W</td><td>L</td><td>X</td><td>G+</td><td>G-</td><td>G+-</td><td>Punten</td>
</tr>
<tr>
    <td>1.</td><td>Turkse Rangers</td><td>4</td><td>4</td><td>0</td><td>0</td><td>33</td><td>14</td><td>19</td><td>12</td>
</tr>
<tr>
    <td>2.</td><td>ZVC Sinte Goemmer</td><td>4</td><td>4</td><td>0</td><td>0</td><td>31</td><td>13</td><td>18</td><td>12</td>
</tr>
<tr>
    <td>3.</td><td>Den Boechout</td><td>5</td><td>4</td><td>1</td><td>0</td><td>30</td><td>16</td><td>14</td><td>12</td>
</tr>
<tr>
    <td>4.</td><td>Garage Van Rompaey</td><td>3</td><td>3</td><td>0</td><td>0</td><td>40</td><td>9</td><td>31</td><td>9</td>
</tr>
</table>
</td></tr></table>
</div>
</div>
</body>
</html>

在我网页的css下面

@charset "utf-8";
html{
    font:12pt;
    font-family:Verdana, Geneva, sans-serif;
}
body{margin:0px;}
header h1{
    float:left;
}
header{
    background-color:white;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#F00;
    float:left;
    display:block;
}
nav{
    background-color:#F00;
    float:right;
    height:60px;
    display:block;
    width:auto;
}
nav a{
    text-decoration:none;
    list-style:none;
    color:white;
    font-size:20px;
    padding:8px;
}
nav li:hover,a:hover{
    color:black;
}
li{
    display:inline;
}
img{
    border-color:#F00
}
.page{
    float:left;
}
.verticalline{
    border-left: thick solid #ff0000;
}

最佳答案

请检查我已更改的此 html。将一个 class="container"分配给 body 中的拳头 div，并为此类赋予宽度，而不是使它向左浮动。也将 margin 0px auto 分配给它。

.container {
margin: 0px auto;
width: 800px;
}

还可以通过提供以下样式使您的 h1 标签在文档流中看起来不错。

header h1 {
float: left;
margin: 11px;
}

最后，您的所有代码都在下面，只需将其复制并粘贴到您的 html 中即可查看结果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lierse Liga</title>
<style type="text/css">
@charset "utf-8";
html{
    font:12pt;
    font-family:Verdana, Geneva, sans-serif;
}
body{margin:0px;}
.container { margin: 0px auto; width: 800px; }
header h1{
   float: left;
margin: 11px;
}
header{
    background-color:white;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#F00;
    float:left;
    display:block;
}
nav{
    background-color:#F00;
    float:right;
    height:60px;
    display:block;
    width:auto;
}
nav a{
    text-decoration:none;
    list-style:none;
    color:white;
    font-size:20px;
    padding:8px;
}
nav li:hover,a:hover{
    color:black;
}
li{
    display:inline;
}
img{
    border-color:#F00
}
.page{
    float:left;
}
.verticalline{
    border-left: thick solid #ff0000;
}

</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<header>
<h1>Lierse Liga</h1>
    <nav>
    <ul class="menu">
        <li><a class="button" href="index.html">Home</a></li>
        <li><a class="button" href="eersteklasse.html"><img src="bal.gif" id="img1" />Eerste Klasse</a></li>
        <li><a class="button" href="tweedeklasse.html">Tweede Klasse</a></li>
        <li><a class="button" href="contact.html">Contact</a></li>
    </ul>
    </nav> 
</header>
</div>
<div class="page">
<table><tr><td>
<table>
    <tr>
        <td colspan=2><h3>Wedstrijden Maandag</h3></td>
    </tr>
    <tr>
        <td><p>19h</p></td><td><p>Turkse Rangers - Sinte Goemmer</p></td><td><p>0-0</p></td>
    </tr>
    <tr>
        <td colspan=2><h3>Wedstrijden Woensdag</h3></td>
    </tr>
    <tr>
        <td><p>19h</p></td><td><p>Turkse Rangers - Sinte Goemmer</p></td><td><p>0-0</p></td>
    </tr>
    <tr>
        <td colspan=2><h3>Wedstrijden Vrijdag</h3></td>
    </tr>
    <tr>
        <td><p>19h</p></td><td><p>Turkse Rangers - Sinte Goemmer</p></td><td><p>0-0</p></td>
    </tr>
</table>
</td>
<td><hr width="1" size="400"></td>
<td valign="top">
<table>
<tr>
    <td colspan=10><h3>Klassement</h3></td>
</tr>
<tr>
    <td>Nr.</td><td>Ploeg</td><td>#wed.</td><td>W</td><td>L</td><td>X</td><td>G+</td><td>G-</td><td>G+-</td><td>Punten</td>
</tr>
<tr>
    <td>1.</td><td>Turkse Rangers</td><td>4</td><td>4</td><td>0</td><td>0</td><td>33</td><td>14</td><td>19</td><td>12</td>
</tr>
<tr>
    <td>2.</td><td>ZVC Sinte Goemmer</td><td>4</td><td>4</td><td>0</td><td>0</td><td>31</td><td>13</td><td>18</td><td>12</td>
</tr>
<tr>
    <td>3.</td><td>Den Boechout</td><td>5</td><td>4</td><td>1</td><td>0</td><td>30</td><td>16</td><td>14</td><td>12</td>
</tr>
<tr>
    <td>4.</td><td>Garage Van Rompaey</td><td>3</td><td>3</td><td>0</td><td>0</td><td>40</td><td>9</td><td>31</td><td>9</td>
</tr>
</table>
</td></tr></table>
</div>
</div>
</body>
</html>

关于带有空格且未对齐的 HTML 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26846473/

27

4

0

文章推荐： CSS/IE - 在 IE 中选择内容时删除虚线

java - 正则表达式 30 个数字 + 空格 + 连字符 + 空格 1 个数字
我有这个代码来查找这个模式:201409250200131738007947036000 - 1，在文本内 final String patternStr = "(\\d{
正则表达式删除方括号/空格
我正在尝试使用正则表达式清除一些用户输入，以删除 [ 和 ] 并删除任何大于 1 个空格的空格。但我似乎无法实现我想要的效果。这是我第一次使用正则表达式，所以我对如何写出来有点困惑。 (preg_re
Java正则表达式匹配单词+空格
我正在尝试构建这个简单的正则表达式来匹配 Java 中的单词+空格，但我在尝试解决它时感到困惑。该网站上有很多类似的示例，但答案大多给出了正则表达式本身，而没有解释它是如何构造的。我正在寻找的是形成
Python删除行之间的输入/空格
好吧，我已经阅读了很多建议如何消除多余空间的帖子，但无论出于何种原因，我似乎无法将这些建议应用到我的系统中，所以我在这里寻求您的帮助。这些是我代码的最后几行: for line in rli
javascript - 如何删除某些空的新行/空格
所以我正在我的测试存储上学习网页抓取，但我不确定如何正确地从“sizes”数组中删除空的新行。 const $ = cheerio.load(body) $('div.lis
javascript - 输入表单中不允许有空白字符/空格
这个问题已经有答案了: How to prevent invalid characters from being typed into input fields (8 个回答) 已关闭 9 年前。是
java - 忽略空格、空格
有人知道如何让扫描仪忽略空间吗？我想输入名字和第二个名字，但扫描仪不让我输入，我想保存全名 String name; System.out.print("Enter name: "); name =
VIM:空格/制表符缩进
这个问题在这里已经有了答案: Make Vim show ALL white spaces as a character (23 个回答) 关闭 8 年前。 VIM(使用 Solarized Dar
java - 流标记器、空格
我想使用 StreamTokenizer 从 java 文件中提取名称。我已将空格设置为逗号 inputTokenizer.whitespaceChars(',', ','); 但是，
Java:读取txt文件并将其保存在字符串数组中但不带反斜杠(空格)？
我正在使用此代码逐行读取 txt 文件。 // Open the file that is the first command line parameter FileInputStream fstre
Java 正则表达式 - 空格
我似乎无法弄清楚我需要的正则表达式。这就是我想要实现的目标: {ANY CHAR} + @javax.persistence.Column(name = "{ANY 30 CHARS}") + {AN
StyleCop 和 = 空格
我正在运行 StyleCop(顺便说一句，如果你想提供高质量的代码，我完全推荐它)... 我有这条线 [System.Xml.Serialization.XmlRootAttribute(Namesp
PhpStorm 在每次保存时删除制表符/空格
我刚刚更新到 PhpStorm 2016，我突然注意到，每次我按 Ctrl + S 保存文件时，它都会删除我在测试这段代码后按下以继续编写的空格/制表符。请帮忙，这对我来说很烦人，因为我在每一行代码
c - 输入名称(空格)
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 7 年前。 Improve th
c - 删除c程序中的制表符/空格
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
路径中的 C# 空格
我已经看过几十个关于这个主题的问题和答案，但我仍然无法解决我的问题。我在我的代码中使用了一个外部 ffmpeg 转换器，我将文件路径作为参数传递，如下所示: OutputPackage oo = c
c - 空格、特殊字符和转义序列
谁能详细解释一下它们是什么以及它们之间的区别。提前致谢。最佳答案转义序列是代表其他内容的字符序列。例如(“\n” = 新行，“\?” = 问号等)。有关更详细的列表，请检查:https://en.
javascript - 从数组中删除换行符/空格
我无法从我的 javascript 文本中删除换行符。这是我正在处理的数据示例: 0: "Christian Pulisic" 1: "↵" 2: "From Wikipedia, the free
java - 从字符串Java的开头和结尾删除新行/空格
我有一个问题 - 我似乎无法从字符串的开头/结尾删除新行/空格。我在正则表达式的开头和结尾使用 \s ，甚至在获取字符串后使用 .trim() ，但无济于事。 public void extractI
用于超链接的变量中的 PHP 空格
我是 php 的新手，我正在尝试将一系列变量添加到 html 超链接中。但是，任何返回空格的变量都会弄乱超链接。 Grants Test

首页

博学

6Ren·AI

商城

带有空格且未对齐的 HTML 页面