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被推到它下面而不是右边。我可能只是错过了这个课程，但是我没有找到一个带有左菜单的简单主要内容的完整示例。

谢谢！

编辑：

这是侧导航的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

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

1 - 浮动离开.side-nav并将保证金设为main-section：

＆＃13;

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

＆＃13;

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

＆＃13;

2 - 浮动这两个元素并将width设置为main-section：

＆＃13;

*{
    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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

这个策略注释在元素之间出现了一个垃圾白色空间而你必须处理它，有一些方法可以做到这一点，但有点麻烦。

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

Answer 2

如果您希望两个元素并排而不是堆叠在一起，请尝试使用display: inline-block代替display: block;

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

希望这有帮助。

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

2 个答案: