Html 将jQuery垂直选项卡内容区域扩展到整个页面宽度

我已经设置了一组垂直选项卡，如图所示。但是，内容区域仅延伸到页面的一半左右

我一直在尝试调整CSS，通过向各种UI CSS标签添加

width='100%'

属性或播放内置的width属性值，使其能够流到页面的远边缘，它确实扩展了窗口，但它开始将实际内容放在错误的位置

例如，如果从

.ui选项卡垂直

中删除

宽度：55em

，白色容器区域会完全扩展，但“hello”文本会出现在以下位置：

我如何调整CSS以允许内容区域占据整个页面宽度，但仍然从垂直选项卡列表的左侧开始填充

---

如果设置宽度可以解决问题，请尝试执行以下操作：

width: calc(100% - 162px);

---

162px是我假设左侧边栏的宽度。

更改

.ui tabs vertical.ui tabs面板的
规则

.ui-tabs-vertical .ui-tabs-panel 
{ 
  padding: 1em; 
  float: right; 
  width: 40em;
}

浮动：左

.ui-tabs-vertical .ui-tabs-panel 
{ 
  padding: 1em; 
  float: left; 
  width: 40em;
}

似乎按预期工作。
在JSFIDLE或其他内容上添加一些代码。如果不查看代码，则无法给出答案。@Vlad Done，对此表示抱歉。我已经准备好了，但忘了把它添加到帖子中。哈哈，没有人会浏览10万行代码。。请仅使用必要的工具进行调整css@DomlThe-这是标准的jQueryUI css，唯一有趣的是jquery文档垂直示例链接中最上面的15行。看起来没有什么不同，只是提醒
.ui选项卡垂直{width:55em；}
样式规则。所以设置宽度不是选项？将其设置为
width:100%
可能对您的案例不起作用。将
.ui选项卡垂直交换。ui选项卡面板{padding:1em；float:right；width:40em；}
从右浮动到左浮动实际上似乎是我想要的。但我不太清楚为什么。