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

时间：2014-11-10 14:53:23

标签： html css

我目前正在开发一个基本的小网页。但我的布局有一些基本问题。我会在菜单下面留下很多空白，无论我做什么，我的网站都不会与页面中心对齐。我添加了我的页面和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;
}

2 个答案:

答案 0 :(得分：0)

请检查这个html我已经改变了。 分配一个类=＆＃34;容器＆＃34;在拳体中加入div并为这个类赋予宽度，而不是让它浮动。为此也分配保证金0px auto。

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

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

＆＃13;
＆＃13; 
header h1 {
float: left;
margin: 11px;
}
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
    <!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

Here is the working solution:
Use div instead of table for better results.
Explanation: 
Give main container as 100% width and float as left.
Give sub-container as 80% width, float as none and margin as 0 auto.


   <!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">
        <style type="text/css">
            @charset "utf-8";
            html{
                font:12pt;
                font-family:Verdana, Geneva, sans-serif;
            }
            body{margin:0px;}
            html,body {
                width:100%;
                height: 100%;
            }
            header h1{
                float:left;
            }
            .main_container {
                float: left;
                width: 100%;
                height: 100%;
                background-color: grey;
            }
            .center {
                width:80%;
                float: none;
                margin:0 auto;
            }
            header{
                font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
                background-color: #ffffff;
                color: #ff0000;
                display: inline-block;
                float: none;
                margin: auto;
            }
            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:none;
                width:100%;
                display: block;
                clear: both;
            }
            .verticalline{
                border-left: thick solid #ff0000;
            }
            table {
                margin:0 auto;
            }
            .wrapper {
                display: block;
                float: left;
                width:100%;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="main_container">
            <div class="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>
        </div>
    </body>
</html>

相关问题
最新问题