如何在面板上添加竖线？答案

【问题标题】：How to add a vertical bar on a panel?如何在面板上添加竖线？
【发布时间】：2023-03-29 22:12:01
【问题描述】：

我只是想在我的面板的右侧上添加一个可以从上到下的垂直条。我更喜欢有一个类而不是内联 css 样式。谁能告诉我我错过了什么？提前非常感谢！

注意：

我想在我的 p-panel 中使用一个 div 来制作垂直条

这是我的代码：

<p-panel>
 <p-header>
    Title
</p-header>

  <textarea [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize"></textarea>
  <div class = "my-class"></div>

</p-panel>

这是我想要的照片：

【问题讨论】：

边界是否可行> plnkr.co/edit/rCy90JTxXFOoWSI9GcDH?p=preview
不，我宁愿在我的面板中有一个 div，而不是在 p 面板级别有一个类。因为我以后会用它作为分离器。
问题需要改进，因为 OP 完成的 cmets 引发了一些矛盾，问题缺乏可视化场景所需的足够信息。它不回答基本查询，例如拆分器是否可以调整大小？如果不是，分离器需要什么？分离器的另一边会有什么东西吗？如果拆分器的另一侧没有任何内容，那么为什么不使用样式边框？
@MunimMunna 可能不使用“拆分器”这个词。我只想要面板右侧的竖线（竖线需要在面板内）。就是这样，简单明了。
你想把它放在 Title div 里面吗？

标签： css angular typescript sass primeng

【解决方案1】：

给你：https://plnkr.co/edit/K3SQnzRBjuZMRH0P61u3?p=preview

.ui-panel {
  position: relative !important;
}

.my-box {
  position: absolute; 
  right: 3px; 
  top: 3px; 
  bottom: 3px; 
  width: 40px; 
  background: red;
}

【讨论】：

你打赌！你也可以奖励你的赏金吗？ :D

【解决方案2】：

您可以使用 flexbox 布局。

覆盖ui-panel-content 类以使用弹性属性：

.ui-panel-content {
  padding: 0 !important;
  display: flex;
  justify-content: space-between; // for the textarea to be on the left and the border on the right
}

这是您的面板 HTML 内容：

<div class="panelContent">
      <textarea [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize"></textarea>
    </div>

<div class="panelBorder"></div>

及其相关的 CSS ：

.panelContent {
  padding:5px;
}

.panelBorder {
  background: red; 
  width: 4px;
}

见Plunker

【讨论】：

你已经接近了，但我希望垂直条从面板标题一直到底部，就像我在我的图片上一样。
无论如何不要将它包装到主 div 中，就像你拥有它 "id="mainPanel" ？
如果你绝对想要一个 div，我不这么认为。

【解决方案3】：

只放入一个 div 怎么样，给它一些宽度和一些高度（你喜欢什么），给它 position:absolute;然后对：0；和位置：固定？

example{
background-color:red;
width:5%;
height:100%;
right:0%;
position:absolute;
position:fixed;
}

或者代码太简单了？但这里有一个建议。

【讨论】：