我正在尝试为我网站上的几个页面创建一个侧面导航菜单。我用来创建不同的列，一个用于内容，一个用于导航菜单。问题是内容在正确的列内，但它不与菜单垂直对齐。
我已经使用CSS在我网站的其他页面上创建了两个不同的列，但我在这里遗漏了一些东西。我需要更改哪些内容以确保页面右侧的内容与菜单栏一起排在页面顶部？感谢您的帮助，我真的很感激。
这是代码和随附的jsfiddle链接。 http://jsfiddle.net/tbon324536/Fv5Q6/
table#vitamins{
border: 1px solid black;
font-size: 16px;
}
table#vitamins td {
border: 1px solid black;
padding: 5px;
font-size: 16px;
}
table#vitamins tr {
background: #b8d1f3;
font-size: 16px;
}
table#vitamins tr:nth-child(even) {
background: #b8d1f3;
}
table#vitamins tr:nth-child(odd) {
background: #dae5f4;
}
table#vitamins th {
border: 1 px solid black;
}
/**=============Content Layout================**/
#contentmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {display: inline;
float: left;
margin-right:10px;
}
#contentmenu a {display:block;
padding:10px;
width:180px;
color:#ffffff;
font-size:20px;
background-color:#2b547c;
}
#contentsubmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {display:block;
float: none;
}
#contentsubmenu a {display:block;
width:180px;
color:#000000;
font-size:16px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
#mineralmenu ul {margin: 0;
margin-left:260px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#mineralmenu li {display: inline;
float: left;
margin-right:10px;
}
#mineralmenu a {display:block;
padding:10px;
width:180px;
color:#ffffff;
font-size:20px;
background-color:#2b547c;
}
#mineralsubmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#mineralsubmenu li {display:block;
float: none;
}
#mineralsubmenu a {display:block;
width:180px;
color:#000000;
font-size:16px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff;
}
#antioxidantmenu ul {margin: 0;
margin-left:500px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#antioxidantmenu li {display: inline;
float: left;
margin-right:10px;
}
#antioxidantmenu a {display:block;
padding:10px;
width:180px;
color:#ffffff;
font-size:20px;
background-color:#2b547c;
}
#antioxidantsubmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#antioxidantsubmenu li {display:block;
float: none;
}
#antioxidantsubmenu a {display:block;
width:180px;
color:#000000;
font-size:16px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff;
}
/**===========Content Left Menu==============**/
#pagemenu ul {margin: 0;
float:none;
padding:0px;
width:100px;
list-style-type: none;
list-style-image: none;
}
#pagemenu li {display: inline;
float:none;
}
#pagemenu a {display:block;
padding:10px;
width:100px;
color:#ffffff;
font-size:16px;
background-color:#2b547c;
}
#pagesubmenu ul {margin: 0;
margin-right:15px;
float:none;
padding:0px;
width:100px;
list-style-type: none;
list-style-image: none;
}
#pagesubmenu li {display:block;
float: none;
}
#pagesubmenu a {display:block;
width:100px;
color:#000000;
font-size:14px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
**/============Paragraph Layout=============*//
#leftcontent {
padding-top:15px;
width: 480px;
float: none;
}
#rightcontent {
margin-left: 480px;
}
这是html。
<div id="leftcontent">
<div id="pagemenu">
<ul>
<li><a href="/Articles.asp?ID=273" alt="Vitamins">Vitamins ></a>
<div id="pagesubmenu">
<ul>
<li><a href="/Articles.asp?ID=265" alt="Vitamin A">Vitamin A ></a></li>
<li><a href="/Articles.asp?ID=266" alt="Vitamin B6">Vitamin B6 ></a></li>
<li><a href="/Articles.asp?ID=267" alt="Vitamin b12">Vitamin B12 ></a></li>
<li><a href="/Articles.asp?ID=268" alt="Vitamin C">Vitamin C ></a></li>
<li><a href="/Articles.asp?ID=268" alt="Vitamin D">Vitamin D ></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="vitaminguide">
</div>
<br/><br/>
<div id="rightcontent">
<table id="vitamins">
<tbody>
<tr>
<th>
<inline style="font-size: 16px;">
Food
</inline>
</th>
<th>
<inline style="font-size: 16px;">
Serving Size
</inline>
</th>
<th>
<inline style="font-size: 16px;">
Amount (IU)
</inline>
</th>
<th>
<inline style="font-size: 16px;">
% Daily Value
</inline>
</th>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Fish Oil, Cod Liver
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Tbsp
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1360
</inline>
</td>
<td>
<inline style="font-size: 16px;">
340%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Portabella Mushrooms, Grilled
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Cup Sliced
</inline>
</td>
<td>
<inline style="font-size: 16px;">
634
</inline>
</td>
<td>
<inline style="font-size: 16px;">
159%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Rainbow Trout, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Fillet
</inline>
</td>
<td>
<inline style="font-size: 16px;">
539
</inline>
</td>
<td>
<inline style="font-size: 16px;">
135%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Sockeye Salmon, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
3.0 Oz
</inline>
</td>
<td>
<inline style="font-size: 16px;">
447
</inline>
</td>
<td>
<inline style="font-size: 16px;">
112%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Canned Tuna Fish
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
393
</inline>
</td>
<td>
<inline style="font-size: 16px;">
98%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Morel Mushrooms
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
136
</inline>
</td>
<td>
<inline style="font-size: 16px;">
34%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Tilapia, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Fillet
</inline>
</td>
<td>
<inline style="font-size: 16px;">
130
</inline>
</td>
<td>
<inline style="font-size: 16px;">
33%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Whole Milk, Fortified
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
124
</inline>
</td>
<td>
<inline style="font-size: 16px;">
31%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Fortified Soy Milk
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
100
</inline>
</td>
<td>
<inline style="font-size: 16px;">
25%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Spareribs
</inline>
</td>
<td>
<inline style="font-size: 16px;">
3.0 Oz
</inline>
</td>
<td>
<inline style="font-size: 16px;">
88
</inline>
</td>
<td>
<inline style="font-size: 16px;">
22%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Roasted Turkey Breast
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Breast
</inline>
</td>
<td>
<inline style="font-size: 16px;">
86
</inline>
</td>
<td>
<inline style="font-size: 16px;">
22%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Fortified Yogurt
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Container (6 Oz.)
</inline>
</td>
<td>
<inline style="font-size: 16px;">
80
</inline>
</td>
<td>
<inline style="font-size: 16px;">
20%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Yellowfin Tuna, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
3.0 Oz
</inline>
</td>
<td>
<inline style="font-size: 16px;">
70
</inline>
</td>
<td>
<inline style="font-size: 16px;">
18%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Ground Turkey, Raw
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Lb
</inline>
</td>
<td>
<inline style="font-size: 16px;">
64
</inline>
</td>
<td>
<inline style="font-size: 16px;">
16%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Hard-Boiled Egg
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Large Egg
</inline>
</td>
<td>
<inline style="font-size: 16px;">
44
</inline>
</td>
<td>
<inline style="font-size: 16px;">
11%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Pork Chop, Broiled
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Chop
</inline>
</td>
<td>
<inline style="font-size: 16px;">
38
</inline>
</td>
<td>
<inline style="font-size: 16px;">
10%
</inline>
</td>
</tr>
</tbody>
</table>
<p>
<inline style="font-size: 16px;"><br/><b>Daily Recommendations for Vitamin D Intake</b><br/></inline>
</p>
<table id="vitamins">
<tbody>
<tr>
<th>
<inline style="font-size: 16px;">Age</inline>
</th>
<th>
<inline style="font-size: 16px;">Male</inline>
</th>
<th>
<inline style="font-size: 16px;">Female</inline>
</th>
<th>
<inline style="font-size: 16px;">Pregnant</inline>
</th>
<th>
<inline style="font-size: 16px;">Lactating</inline>
</th>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">0-12 Months</inline>
</td>
<td>
<inline style="font-size: 16px;">400 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">400 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">1-13 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">14-18 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">19-50 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">51-70 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">70+ Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
</tbody>
</table>
</div>
</div>
答案 0 :(得分：1)
您需要将float: left;属性添加到#leftcontent div。
此处的说明，定义和示例：http://www.w3schools.com/css/css_float.asp
答案 1 :(得分：1)
您需要在左栏中使用float: left;。