0
無論出於何種原因，我的表格中的文字未正確對齊。我相信它處理每列之間的內容差異，但是甚至試圖在每張表格中放置空格似乎並不能解決它。表格內容不一致
編輯：Woops！感謝ddenhartog讓我知道我忘了添加什麼在我想要的！
例如，我的左欄中的文字比我的中間欄開始更靠後，它開始於我想要的位置，表的起始位置。我最右邊的列開始於左側和中間列的中間。我想讓我的列對齊，以便它們從每列開頭的相同位置開始。
我希望我的解釋有道理！小提琴提供了一個更好的可視化。
這是我的HTML：
<title>Liberty | Las Vegas | Home</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine4//style.css" media="screen" />
<script type="text/javascript" src="engine4//jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<link href="stylesheet_2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #666;
}
a:active {
color: #D00E16;
}
a:hover {
color: #33BDFF;
}
</style>
</head>
<body>
<div id="banner">
<a href="index.html"><h1>LIBERTY</h1>
<hr color=white />
<h3>High School</h3></a>
</div>
<div id="schedule">
<p> </p>
</div>
<div id="wrap">
<ul class="navbar">
<li><a href="index.html">LHS Home</a></li>
<li><a target="_blank" href="PDFs/2014/LHS Course Catalog 2013-2014.pdf">Courses</a> </li>
<li><a href="Faculty.html">Faculty</a></li>
<li><a href="Programs.html">Programs and Athletics</a></li>
<li><a href="">Information ▽</a>
<ul>
<li><a target="_blank" href="https://parentlink.ccsd.net/html/ContentBase/Content/Home/Login">ParentLink</a></li>
<li><a target="_blank" href="https://twitter.com/">Twitter</a></li>
<li><a target="_blank" href="https://www.facebook.com/">Facebook</a></li>
<li><a href="Handouts.html">Important Handouts</a>
</ul>
</li>
</ul>
</div>
<br />
<div id="slide_background">
<!-- Start WOWSlider.com BODY section id=wowslider-container4 -->
<div id="wowslider-container4">
<div class="ws_images"><ul>
<li><img src="#" alt="Photo by" title="Photo by Krystel Tirso" id="wows4_0"/></li>
<li><img src="#" alt="Photo by " title="Photo by Christine Fuhler" id="wows4_1"/></li>
<li><img src="#" alt="Photo by" title="Photo by Sharon Deleon" id="wows4_2"/></li>
<li><img src="#" alt="Photo by " title="Photo by Sharon Deleon" id="wows4_3"/></li>
<li><img src="#" alt="Photo by " title="Photo by Jessica Lopez" id="wows4_4"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Photo by o">1</a>
<a href="#" title="Photo by ">2</a>
<a href="#" title="Photo by n">3</a>
<a href="#" title="Photo by eon">4</a>
<a href="#" title="Photo by z">5</a>
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine4//wowslider.js"></script>
<script type="text/javascript" src="engine4//script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div id="frontpage">
<table border="0" cellspacing="10" cellpadding="10">
<!-- Row 1 -->
<tr>
<th style="width:20em;" align="left">Announcements</th>
<th style="width:20em;" align="center">Weekly Schedule</th>
<th style="width:20em;" align="right">Celebrations</th>
</tr>
<!-- Row 2 -->
<tr>
<td style="width:20em;" align="left">
<h2 class="schedule_day"><a href="#" title="L6TV" target="_blank" dir="ltr" data-sessionlink="ei=Dl8rU_bBDsil-QObpYDoCA">Morning announcements l6tv</a></h2>
<p class="schedule_day"><a href="http://webstores.activenetwork.com/school-software/liberty_high_schow32/index.php?l=product_detail&p=485#.UxoMA86POB6#.UydqU6hdV8E" target="_blank">Spring Reverse Tickets!</a></p>
<br />
<a href="http://webstores.activenetwork.com/school-software/liberty_high_schow32/index.php?l=product_detail&p=485#.UxoMA86POB6#.UydqU6hdV8E" target="_blank"><img src="images\2014 spring reverse tickets.jpg" /></a>
<p>Purchase your tickets <a style="text-decoration:underline" href="http://webstores.activenetwork.com/school-software/liberty_high_schow32/index.php? l=product_detail&p=485#.UxoMA86POB6#.UydqU6hdV8E">here!</a></p>
</td>
<td style="width:20em;" align="center">
<p class="schedule_day">March 24th - 28th<br />
Spring reverse<br />
Spirit Days<br /></p>
<p><span class="bold_pink">Mocking Jay Monday – 3/24</span><br />
STUCO will hand out Mocking Jay stickers <br />
</p>
<p><span class="bold_pink">Crowning Victor Tuesday – 3/25</span><br />
Students decorate crowns at home to wear today. At lunch, there will be a competition for the best decorated crown. Winner will receive a free Spring Reverse ticket</p>
<p><span class="bold_pink">Crazy Capitol Wednesday – 3/26</span><br />
crazy hair and outfits that are bright with with elaborate, crazy, exotic patterns, etc.<br />
</p>
<p><span class="bold_pink">Peacekeeper Thursday – 3/27</span><br />
Camouflage/army wear</p>
<p><span class="bold_pink">Catching Fire Friday – 3/28</span><br />
Wear your class colors</p>
<p><span class="bold_red">Freshmen: Red</span> – <span class="bold_blue">Sophomore: Blue</span></p>
<p><span class="bold_orange">Junior: Orange</span> – <span class="bold_yellow">Seniors: Yellow</span></p>
<p class="schedule_day">Friday (3/21)</p>
<p> <span class="bold">Last Day of 3rd Quarter</span><br />
2p - Orchestra Festival - UNLV<br />
3:30p - Baseball Varsity vs. Green Valley - Home<br />
5p - Swim/Diving vs. Del sol - UNLV<br />
</p>
<p class="schedule_day">Saturday (3/22)</p>
<p> Baseball Junior Varsity Tournament <br />
Track - Chandler, AZ <br />
Track - Faith Lutheran High School <br />
SAVE/Law Club - CA<br />
9a - State Theater Conference - Liberty <br />
12p - Swim vs. Del Sol - Multi Gen Pool <br />
6p - ROTC - Revere Country Club <br />
</p>
</td>
<td style="width:20em;" align="right">
<p class="schedule_day">Photography Contest Winners!</p>
<p>Liberty's very own name and name have won first and second place, respectively, in the Landscape, Nature, and Cityscape category of the Annual Louis J. Hendrickson Memorial Photography Contest! Please congratulate them! You can view their work <a href="#" target="_blank" style="text-decoration:underline;">here!</a> (WARNING: Bug!)</p>
<p class="schedule_day">Hard Rock Pin Contest Winner!</p>
<img style="width:20em; height:13em;" src="images\2014 hard rock pin contest winner.png" />
<p>Please congratulate name - she won the Hard Rock Hotel's Pin Design Contest! Her super cool design was chosen out of 2,000 designs submitted this year. Proceeds from the pin made from her design go to the Public Ed Foundation.</p>
</td>
</tr>
</table>
</div>
<footer>
<p align="center">This website was created by the Liberty High School Career and Technical Education Program Web Design & Development Students. ©2014-2015<br />
All Photos taken by Liberty High School Photography Students.
<br />
Web Design Advisor – </p>
<p align="center">#</p>
</footer>
我的CSS
body {
background-image:url(images/images/banner_repeat_01.jpg);
width:auto;
height:auto;
background-repeat:repeat-x;
}
footer {
background-color:#c3c3c3;
background-repeat:repeat-x;
background-position:bottom;
width:100%;
left:0;
right:0;
position:absolute;
}
#banner {
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
color:white;
text-shadow: 2px 2px 5px #000;
font-family:"Times New Roman", Times, serif;
}
#schedule {
color:white;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:2.9em;
}
#slide_background {
background-color:#c3c3c3;
margin-left:auto;
margin-right:auto;
width:100%;
position:absolute;
left:0;
right:0;
}
#slides {
background-color:#000;
margin-left:auto;
margin-right:auto;
text-align:center;
height:13em;
width:70%;
margin-top:-1em;
color:white;
}
#frontpage {
margin-left:auto;
margin-right:auto;
width:100%;
color:#333;
margin-top:23em;
}
#banner hr {
width:15em;
margin-top:-1.8em
}
#frontpage table th {
color:#333;
border-collapse:collapse;
font-size:2em;
text-decoration:underline;
font-variant:small-caps;
}
#frontpage table td {
color:#161616;
border-collapse:collapse;
font-size:1.3em;
}
h1 {
font-size:2.8em;
margin-top:-.1em;
}
h3 {
font-variant:small-caps;
margin-top:-.2em;
letter-spacing:4px;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration:none;
font-weight:bold;
color:black;
}
a:active {
text-decoration:underline;
color: #00F;
}
table a:hover {
text-decoration:underline;
font-weight:bold;
color:#33F;
}
#banner a:active {
text-decoration:none;
}
a h3 {
color: #FFF;
text-decoration: none;
}
a h1 {
color: #FFF;
text-decoration: none;
}
table {
font-family:"Times New Roman", Times, serif;
font-size:1em;
margin-left:auto;
margin-right:auto;
letter-spacing:2px;
margin-top:-.5em;
}
body table td:nth-child(n) {
border-right:solid thin;
}
#programs_content table td:nth-child(1) {
border-left:solid thin;
}
td:nth-child(1) {
border-right:solid thin;
}
td:nth-child(2) {
border-right:solid thin;
}
td:nth-child(3) {
border-right:solid thin;
}
#frontpage td:nth-child(3) {
border-right:none;
}
.schedule_day {
font-weight:bold;
font-size:1.3em;
text-decoration:underline;
color:black;
font-variant:small-caps;
}
#banner a h1 {
text-decoration: none;
}
.bold {
font-weight: bold;
color: #333;
}
.bold_pink {
font-weight: bold;
color: #CF016E;
}
.bold_red {
font-weight: bold;
color: #F00;
}
.bold_blue {
font-weight: bold;
color: #00F;
}
.bold_yellow {
font-weight: bold;
color: #FC0;
}
.bold_orange {
font-weight: bold;
color: #D94F26;
}
#wrap {
width: 100%; /* Spans the width of the page */
height: 3.8em;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: absolute;
background-color:#FFF;
left:-3px;
right:0;
top: 153px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
body {
width:100%;
height:100%;
}
.navbar {
display:inline-block;
}
.navbar li {
height: 1.5em;;
width: 10em; /* Each menu item is 150px wide */
float:left;
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: "Times New Roman", Times, serif;
font-size:1em;
padding: 0;
margin:0;
border-left:thin solid #000;
border-right:thin solid #000;
}
.navbar a {
padding: 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
text-decoration: none; /* Removes the default hyperlink styling. */
color: #000; /* Text color is white */
display: block;
}
.navbar li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
border: none;
padding: .7em;
}
li:nth-child(1) {
border-right:solid thin;
}
li:nth-child(2) {
border-right:solid thin;
}
li:nth-child(3) {
border-right:solid thin;
}
li:nth-child(4) {
border-right:solid thin;
}
.navbar li ul li {
border:none;
background-color:#CCC;
border:thin solid #000;
padding:5px;
width:130px;
}
.navbar li ul li a:hover {
background-color: #CCC;
}
#programs_content {
text-align:center;
}
謝謝大家！
請描述文本如何錯位，以及如何你想爲它對齊。爲什麼地球上你有你的HTML和你的CSS文件樣式？ –
我知道我會被召喚出來......我只是懶得修理它。我會去移動它。 :( 編輯：其實，這是我的老師在做，責怪她，所有修正:) – Harin