Question

我已经构建了一个同时包含“顶部”和“侧面”菜单的网页，但是现在ui segments扩展到该页面的侧面。菜单是否需要通过Java脚本初始化？还是我坚持使用CSS手动移动细分？任何帮助表示赞赏。

<html>
  <head>
    <title>Test Bed</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
  </head>

  <body>
    <div class="ui vertical inverted left visible sidebar menu">
      <img src="/static/logo.png" style="display: block;margin: 0 auto;">
      <div class="ui divider"></div>
      <div class="header icon">
        <h3>
          <a class="item" href="#some">Menu Item
                <i class="check icon"></i>
            </a>
          <a class="item" href="#some">Menu Item
                <i class="check icon"></i>
            </a>
        </h3>
      </div>
    </div>

    <div class="pusher">
      <div class="ui inverted segment">
        <div class="ui inverted secondary pointing menu">
          <a class="active item" href="/test">Test</a>
          <a class="item" href="/setting">Settings</a>
          <a class="item" href="/service">Services</a>
          <a class="item" href="/LogReader">LogReader</a>
          <a class="item" href="/ErrorPage">ErrorPage</a>
        </div>
      </div>
      <div class="ui segment">
        <table class="ui celled table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Job</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="Name">James</td>
              <td data-label="Age">24</td>
              <td data-label="Job">Engineer</td>
            </tr>
            <tr>
              <td data-label="Name">Jill</td>
              <td data-label="Age">26</td>
              <td data-label="Job">Engineer</td>
            </tr>
            <tr>
              <td data-label="Name">Elyse</td>
              <td data-label="Age">24</td>
              <td data-label="Job">Designer</td>
            </tr>
            <tr>
              <td data-label="Name">Me</td>
              <td data-label="Age">24</td>
              <td data-label="Job">creates the look, layout, and features of a website. The job involves understanding both graphic design and computer programming. ... They work with development teams or managers for keeping the site up-to-date and prioritizing needs, among
                other tasks.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>

</html>

Answer 1

更改偏移内容的方式。

当前，您在内容上使用transform:translate将其向右偏移，以使其不会隐藏在侧边栏后面。在执行此操作时，浏览器将整个元素保持原样，保持其呈现的尺寸并将其逐字移开，从而从视口右侧流血。

相反，请使用更简单的规则margin-left来抵消内容，并且元素将适应可用的任何空间。

展望未来，您可能希望应用更具响应性的设计（针对移动设备），尤其是在表格外观方面。

.pusher：

删除：

-webkit-transform: translate3d(260px,0,0);
transform: translate3d(260px,0,0);

添加：

margin-left: 260px;

无论如何，很明显，如果侧边栏更改尺寸或被切换，则必须使用JS来更改内容偏移。

如何获取语义UI段以正确适合页面宽度

1 个答案: