css - 如何正确对齐图表

Question

我正在尝试将图表与菜单对齐。实际上它们的高度与左侧的菜单不同..

分区：

<nav>
  <div class="menu-item alpha"> 
  <h4><a href="index.aspx" style="color: #EDEDED">Home</a></h4>           

  <p>To Navigate to Home Page</p> 
</div>   

<div class="menu-item"> 
<h4><a href="#">KPIs</a></h4> <!-- colored bar --> 

<ul> <!-- expanding white area --> 
  <li><a href="#">Churn Rate</a></li> 
  <li><a href="#">Dormont Users</a></li> 
  <li><a href="#">Other</a></li> 
</ul> 

</div> 


</nav>

表的 div：

       <table border="1" align="right" >
  <tr>
    <th>Chart 1</th>
    <th>Chart 2</th>
  </tr>
  <tr>
    <td>
    <asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1">
        <Series>
            <asp:Series Name="Series1" ChartType="Line" XValueMember="Activity" YValueMembers="NumberOfStudents" YValuesPerPoint="2"></asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
        </ChartAreas>
    </asp:Chart>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT * FROM [FavouriteActivities]"></asp:SqlDataSource>
</td>
<td>
        <asp:Chart ID="Chart2" runat="server" DataSourceID="SqlDataSource1">
        <Series>
            <asp:Series Name="Series1" ChartType="FastPoint" XValueMember="Activity" YValueMembers="NumberOfStudents" YValuesPerPoint="2"></asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
        </ChartAreas>
    </asp:Chart>
</td>
  </tr>
</table>

这就是正在发生的事情：

这是应该发生的：

你能帮我吗？

Answer 1

将浮点数添加到<nav>而不是menu-item，否则两个菜单块将并排：

CSS -

nav { 
   float: left;
}

table { 
   float: right;
}

Answer 2

试试这个侧边栏导航（注意浮动属性）：

这在你的 CSS 文件中

   menu-item alpha {float: left;}  

这在您的 PHP / ASP / HTML 页面中：

  <table border="1" align="right" style="float:right;">