Question

我正在尝试使用semantic-ui创建一个垂直左侧菜单。管理菜单之类的东西。为了使它对齐到左边，我尝试使用semantic-ui提供的rails元素。但我的内容不可见。

我尝试使用网站中提供的示例代码。但结果仍然相同。我在这里想念的是什么？

<body>
  <div class="ui segment">
    <div class="ui left dividing rail">
        <div class="ui segment">
            Left Rail Content
        </div>
    </div>
    <div class="ui right dividing rail">
        <div class="ui segment">
            Right Rail Content
        </div>
    </div>
    <p></p>
    <p></p>
  </div>
</body>

我看到semantic-ui文档站点也使用类似的方法来显示他们的正确菜单。如果这不是创建管理菜单的最佳方法，请使用语义ui建议任何其他更好的方法。

Answer 1

您需要指定中心元素的大小和位置。例如：

<body>
  <div class="ui segment" style="left:400px;width:600px;">
    <div class="ui left dividing rail">
        <div class="ui segment">
            Left Rail Content
        </div>
    </div>
    <div class="ui right dividing rail">
        <div class="ui segment">
            Right Rail Content
        </div>
    </div>
    <p></p>
    <p></p>
  </div>
</body>

Answer 2

您可以将它们放在grid容器中，然后在主four wide column之前添加segment。您还应该设置主segment eight wide column以使其位于中心（第16页= 4 + 8 + 4）。

请在整页中运行代码段。

＆＃13;

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.css" rel="stylesheet" />


<div class="ui grid container">
  <div class="ui four wide column">

  </div>
  <div class="ui segment eight wide column">
    <div class="ui left rail">
      <div class="ui segment">
        Left Rail Content
      </div>
    </div>
    <div class="ui right rail">
      <div class="ui segment">
        Right Rail Content
      </div>
    </div>
    <p>main content here..................................................</p>
    <p>main content here..................................................</p>
    <p>main content here..................................................</p>
    <p>main content here..................................................</p>
    <p></p>
  </div>

  <div class="ui four wide column">

  </div>
</div>

＆＃13;

如何使用语义-ui rail元素

2 个答案: