html - 基础左侧菜单将主要部分向下推

Question

我正在尝试弄清楚如何使用 Foundation 制作左侧菜单。我读过的所有教程都展示了如何制作菜单，但是由于示例仅包含一个菜单而没有任何正确的内容，因此它们无济于事...

这是我的:

<ul class="four side-nav">
  <li><a ng-click="page = 1">Link 1</a></li>
  <li><a ng-click="page = 2">Link 2</a></li>
  <li><a ng-click="page = 3">Link 3</a></li>
  <li><a ng-click="page = 4">Link 4</a></li>
</ul>

<!-- The parameters content will be displayed in this block by Django-->
<div class="main-section" id="content">
{% block parameters %}

{% endblock %}
</div>

左侧菜单运行良好，但我的主要部分 div 被推到下方而不是右侧。我可能只是错过了类(class)，但我没有找到带有左侧菜单的简单主要内容的完整示例。

谢谢!

编辑:

这是侧边导航的 css。我正在使用 foundation.css，老实说，我从未真正打开过它。

.side-nav {
  display: block;
  margin: 0;
  padding: 0.875rem 0;
  list-style-type: none;
  list-style-position: outside;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }

而且 main-section 似乎并不存在于我的 css 中......

Answer 1

没有看到你的 css(如果你添加它来查看真正的问题会很好)我​​可以给你一些通用的方法来做你想做的事。

1- float 离开 .side-nav 并将边距设置为 main-section:

*{
    box-sizing: border-box;
}

.side-nav {
    margin: 0;
    float: left;
    width: 150px;
    background: #44aac1;
  
   /*your side-nav style*/
    display: block;
    margin: 0;
    padding: 0.875rem 0;
    list-style-type: none;
    list-style-position: outside;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 
}

.main-section {
    height: 300px;
    background: #ddd;
    margin-left: 150px;
}

<ul class="four side-nav">
  <li><a ng-click="page = 1">Link 1</a></li>
  <li><a ng-click="page = 2">Link 2</a></li>
  <li><a ng-click="page = 3">Link 3</a></li>
  <li><a ng-click="page = 4">Link 4</a></li>
</ul>

<!-- The parameters content will be displayed in this block by Django-->
<div class="main-section" id="content">
    main section content
</div>

2- float 两个元素并将 width 设置为 main-section:

*{
    box-sizing: border-box;
}

.side-nav {
    margin: 0;
    float: left;
    width: 150px;
    background: #44aac1;
  
   /*your side-nav style*/
    display: block;
    margin: 0;
    padding: 0.875rem 0;
    list-style-type: none;
    list-style-position: outside;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 
}

.main-section {
    float: left; /*or rigth*/
    height: 300px;
    background: #ddd;
    width: calc(100% - 150px);
}

<ul class="four side-nav">
  <li><a ng-click="page = 1">Link 1</a></li>
  <li><a ng-click="page = 2">Link 2</a></li>
  <li><a ng-click="page = 3">Link 3</a></li>
  <li><a ng-click="page = 4">Link 4</a></li>
</ul>

<!-- The parameters content will be displayed in this block by Django-->
<div class="main-section" id="content">
    main section content
</div>

3- 为两个元素设置display: inline-block

*{
    box-sizing: border-box;
}

.side-nav {
    margin: 0;
    display: inline-block;
    width: 150px;
    background: #44aac1;
  
   /*your side-nav style*/
    /*display: block;*/   /*removed*/
    margin: 0;
    padding: 0.875rem 0;
    list-style-type: none;
    list-style-position: outside;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 
}

.main-section {
    height: 300px;
    background: #ddd;
    display: inline-block;
    vertical-align: top;
}

<ul class="four side-nav">
  <li><a ng-click="page = 1">Link 1</a></li>
  <li><a ng-click="page = 2">Link 2</a></li>
  <li><a ng-click="page = 3">Link 3</a></li>
  <li><a ng-click="page = 4">Link 4</a></li>
</ul>

<!-- The parameters content will be displayed in this block by Django-->
<div class="main-section" id="content">
    main section content
</div>

使用此策略注意在元素之间出现乱七八糟的空白并且您必须处理它，有一些方法可以做到但有点麻烦。

无论如何，还有其他技巧可以得到你想要的东西，我希望其中一些可以帮助你。