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

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; }

而且主要部分似乎并不存在于我的 css...

Answer 1

如果您希望两个元素并排放置而不是彼此堆叠，请尝试使用 display: inline-block 而不是 display: block;

看看这个 jsfiddle：http://jsfiddle.net/kssd5uup/

希望对您有所帮助。

Answer 2

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

1- 向左浮动 .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- 浮动两个元素并将 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>

使用此策略注意元素之间出现白色垃圾space，您必须处理它，有一些方法可以做到，但有点麻烦。

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

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

Foundation left-menu pushes main section down

html

css

zurb-foundation