Question

这是我的代码。

我使用jquery和onsenui使用了垂直制表符。

在Firefox中：使用CTRL + SHIFT + M在移动/平板电脑模式下查看。

现在我正在使用这个超过600px的平板电脑

的index.html

    $(document).ready(function() {
      ons.bootstrap();
      $('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
    });

.ui-tabs.ui-tabs-vertical {
  padding: 0;
  width: 42em;
  margin-left: 6%;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
  border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
  float: left;
  width: 10em;
  background: #F2F2F2;
  border-radius: 4px 0 0 4px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
  clear: left;
  width: 100%;
  margin: 0.2em 0;
  border: none;
  border-width: 1px 0 1px 1px;
  border-radius: 0px;
  overflow: hidden;
  position: relative;
  right: -2px;
  z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
  display: block;
  width: 100%;
  padding: 0.6em 1em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
  cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: 0.2em;
  padding-bottom: 0;
  border-right: 20px solid white;
  border-left: 4px solid #7fcc28;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
  margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
  float: left;
  width: 50%;
  border-left: none;
  border-radius: 0;
  position: relative;
  left: 10px;
  top: 7px;
}
#a,
#b,
#c {
  z-index: 50;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css">
  <link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">

  <script src="http://onsen.io/OnsenUI/build/js/angular/angular.js"></script>
  <script src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>


</head>

<body>
  <ons-navigator>
    <ons-page>
      <div style="min-height: 150px;"></div>
      <ons-list-item modifier="tappable" style="line-height: 500px; padding: 0 14px; background-color: #F2F2F2;">
        <ons-row>
          <ons-col>
            <div id="tabs" style="background-color: #F2F2F2; width:100%;">

              <ul>
                <li style="box-shadow: 2px 2px 2px 1px #888888;">
                  <a href="#a" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 1</a>
                </li>
                <li style="box-shadow: 2px 2px 2px 1px #888888;">
                  <a href="#b" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 2</a>
                </li>
                <li style="box-shadow: 2px 2px 2px 1px #888888;">
                  <a href="#c" style="font-style: Arial; font-size: 14px; color:#666666;">Vertical Tab 3</a>
                </li>
              </ul>

              <div id="a" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
                something goes here 1
              </div>


              <div id="b" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
                something goes here 2
              </div>


              <div id="c" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
                something goes here 3
              </div>
            </div>
          </ons-col>
        </ons-row>
      </ons-list-item>
    </ons-page>
  </ons-navigator>

</body>

</html>

这是我得到的输出

enter image description here

但是当我展开屏幕时，我无法像上面的图像那样使宽度响应。我在右侧得到一些额外的空间，如下所示。

enter image description here

有人可以帮忙吗？

Answer 1

在width:50%

中将width: calc(100% - 6% - 300px);更改为.ui-tabs.ui-tabs-vertical .ui-tabs-panel

然后将width:10em更改为例如width:180px

的.ui-tabs.ui-tabs-vertical .ui-tabs-nav

通过使用calc-您可以设置元素的宽度以适应侧边栏等给定宽度的更改。目前，它只是固定为50%

无法使div宽度响应

1 个答案:

Demo Fiddle