Kendo UI TabStrip 中的布局不正确

Question

我制作了一个布局，想将其放入 Kendo UI TabStrip 中，但是当我这样做时，布局完全乱了。我尝试从选项卡条内容中删除 16px 填充，但无济于事......

这是我尝试将其添加到选项卡之前布局的样子 有人可以告诉我为什么我的布局不想在选项卡条内工作吗？

谢谢

$(document).ready(() => {
  $("#SFOETabStrip").kendoTabStrip({
    animation: {
      open: {
        effects: "fadeIn"
      }
    }
  });
});

#SFOEWindow {
  width: 1400px;
  height: 600px;
  border: 0.5px solid black;
  /*background-color: black;*/
}

#SFOEWindow .k-grid {
  border-radius: 0px
}

#SFOEWrapper {
  width: 100%;
  height: calc(100% - 63px);
  /*background-color: yellow;*/
  
}

#TitleBar {
  width: 100%;
  height: 26px;
  /*background-color: cadetblue;*/
  background-color: #036;
  background-image: none, linear-gradient(rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 100%);
  color: white;
  margin-bottom: 4px;
}

#Left-Panel {
  float: left;
  width: 20%;
  height: 100%;
  /*background-color: yellow;*/
  padding: 2.5px 2.5px 0px 2.5px;
}

#LeftGrid {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  background-color: white;
}

#Right-Panel {
  float: right;
  width: 80%;
  height: 100%;
  /*background-color: deeppink;*/
  padding: 2.5px 2.5px 0px 0px;
}

#CustGridWrapper {
  width: 80%;
  height: 100%;
  float: left;
  /*padding: 5px 5px 5px 5px;*/
  padding: 2.5px;
}

#CustInfoWrapper {
  width: 20%;
  /*background-color: deeppink;*/
  height: 100%;
  float: right;
  padding: 2.5px;
}

#Cust-Info {
  width: 100%;
  height: 100%;
  border: 0.5px solid gray;
  background-color: white;
}

#CustGrid {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  background-color: white;
}

#Top-Panel {
  width: 100%;
  height: 50%;
  /*background-color: blue;*/
  border: 0.5px solid gray;
}

#Bottom-Panel {
  width: 100%;
  height: 50%;
  /*background-color: green;*/
  padding: 2.5px;
  border: 0.5px solid gray;
  border-top: 0px;
}

#Bottom-Grid {
  width: 100%;
  background-color: white;
  height: 100%;
}

#LeftGridWrapper {
  width: 100%;
  height: 100%;
  border: 0.5px solid gray;
  padding: 2.5px;
}

#TabsWrapper {
  width: 100%;
  height: 30px;
  /*padding: 5px 5px 5px 5px;*/
}

#TabButtons {
  width: 100%;
  height: 100%;
  /*background-color: purple;*/
  padding-left: 2.5px;
  display: inline-flex;
}

#TabButtons div {
  /*width: 60px;*/
  height: 31px;
  background-color: white;
  color: black;
  margin-right: 3px;
  padding: 5px;
  border: 1px solid gray;
  /*border-bottom: 0px;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
<link href="https://kendo.cdn.telerik.com/themes/7.2.1/default/default-main.css" rel="stylesheet" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-main.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.bootstrap.min.css" />


<div id="SFOEWindow">
  <div id="TitleBar"></div>
  <div id="SFOETabStrip" style="height:100%">
    <ul>
      <li class="k-active">ABC</li>
      <li>123</li>
    </ul>
    <div id="abc">
      <div id="SFOEWrapper">
        <div id="Left-Panel">
          <div id="LeftGridWrapper">
            <div id="LeftGrid"></div>
          </div>
        </div>
        <div id="Right-Panel">
          <div id="Top-Panel">
            <div id="CustGridWrapper">
              <div id="CustGrid"></div>
            </div>
            <div id="CustInfoWrapper">
              <div id="Cust-Info">

              </div>
            </div>
          </div>
          <div id="Bottom-Panel">
            <div id="Bottom-Grid">

            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="123"></div>
  </div>

Answer 1

TabStrip 将内容的

box-sizing

设置为

border-box

。因此，您可以为容器设置 box-sizing 属性来设置如何计算元素的总宽度和高度。这是一个更新的示例。

使用弹性布局来定位选项卡中的内容也可以，例如。