css 相关问题

CSS（层叠样式表）是一种表示样式表语言，用于描述HTML（超文本标记语言），XML（可扩展标记语言）文档和SVG元素的外观和格式，包括（但不限于）颜色，布局，字体和动画。它还描述了元素应如何在屏幕上，纸上，语音或其他媒体上呈现。

react 中的组件 css 与 index.css

我试图在index.css和app.css文件中的相同类名上提供相同的样式。现在我看到应用了index.css文件样式，但app.css没有应用。例如我写了.class{

css reactjs

回答 1 投票 0

点击链接滚动到目标div，无需全身滚动，javascript

当我单击 link_div 中特定部分的链接时，我想滚动到 content_div 的部分。我尝试使用 javascript，但我无法正确处理这个问题。这幅全身卷轴

javascript html css

回答 1 投票 0

当我最小化窗口时，网格的第三列不会转换为网格的第一行

这是我在 Stackoverflow 上的第一篇文章。我是一个完全的初学者，正在观看这个关于“Html/CSS by SuperSimpleDev”的视频。所以我正在克隆 YouTube 主页。

html css css-grid

回答 1 投票 0

单击链接滚动到目标 div，无需正文 javascript

当我单击 link_div 中特定部分的链接时，我想滚动到 content_div 的部分。我尝试使用 javascript，但我无法正确处理这个问题。这幅全身卷轴

javascript html css

回答 1 投票 0

CDK 拖放预览位于模式对话框后面

在查看了许多堆栈溢出答案后，我发布了这个问题。我需要在对话框模式上启用拖放功能。我在表行上使用它。我可以拖放...

css angular modal-dialog angular16 angular-cdk-drag-drop

回答 1 投票 0

覆盖 MUI v5 中的版式变体样式

我有一个类似但不同的问题 Can't override root styles of Typography from Materil-UI 在 v4 中我有一个主题：从'@material-ui/core/styles'导入{createTheme}；导出常量...

css material-ui

回答 4 投票 0

Bootstrap 折叠使用 css 选择第一个和最后一个子元素

如何选择 Bootstrap 折叠模块的第一个和最后一个子项有什么建议吗？我需要首先和最后选择“.accordion-heading”。如何选择 Bootstrap 折叠模块的第一个和最后一个子项有什么建议吗？我需要首先和最后选择“.accordion-heading”.. <div id="accordion2" class="accordion"> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 1<br /> </a></div> <div id="collapseOne" class="accordion-body in collapse" style="height: auto;"> <div class="accordion-inner"> <p>Content 1</p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 2<br /> </a></div> <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> <p>Content 2</p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 3<br /> </a></div> <div id="collapseThree" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> <p>Content 3</p> </div> </div> </div> http://jsfiddle.net/PzB8D/1/ 你必须先去accordion-group，然后参考accordion-heading 这将是唯一一个具有类accordion-heading的元素:) .accordion-group:first-child .accordion-heading a{color: #f00;} .accordion-group:last-child .accordion-heading a{color: #0f0;} .accordion { &:last-child{ .card-header button.collapsed { border-bottom: none; } } &:first-child{ .card-header button.collapsed { border-bottom: none; } } }

css twitter-bootstrap

回答 2 投票 0

Prime ng：以编程方式调整 p-splitter 中存在的 p-accordion 的大小

请参阅下面我的组件代码：我有一个 p 分配器，它分为 3 个部分。我在每个部分都有一个 p-手风琴，而它又有一个 p-表。 ... 请参阅下面我的组件代码：我有一个 p 分离器，它被分成 3 个部分。我在每个部分都有一个 p-手风琴，而它又具有一个 p-表。 <div class="card w-full"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5"> <ng-template pTemplate> <p-accordion [activeIndex]="0" styleClass="h-full"> <p-accordionTab header="Signed PDF Documents"> <div class="flex justify-content-between"> <div> <h6>Proposal PDF Documents</h6> </div> <div><a>Add Attachment(s)</a></div> </div> <ng-template pTemplate> <p-table [value]="documentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Attachment Name <p-sortIcon field="name"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.name }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" > <p-accordionTab header="Papervision Documents"> <div class="flex justify-content-between"> <div> <h6>Scanned Contract Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="paperDocumentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="number">Customer Number <p-sortIcon field="number"></p-sortIcon> </th> <th pSortableColumn="name">Customer Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="type">Doc Type <p-sortIcon field="type"></p-sortIcon> </th> <th pSortableColumn="docNumber">Doc Number <p-sortIcon field="docNumber"></p-sortIcon> </th> <th pSortableColumn="docDate">Doc Date <p-sortIcon field="docDate"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.number }}</a></td> <td>{{ doc.name }}</td> <td>{{ doc.type }}</td> <td>{{ doc.docNumber }}</td> <td>{{ doc.docDate }}</td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" class="w-100"> <p-accordionTab header="Docusign Documents"> <div class="flex justify-content-between"> <div> <h6>Docusign Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="docusignDocumentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Document Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="number">Doc Id <p-sortIcon field="number"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td>{{ doc.name }}</td> <td><a>{{ doc.number }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> </p-splitter> </div> 我这里有两个问题需要解决：如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。（这3个手风琴的最大尺寸）怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？感谢您的阅读，如有任何帮助，我们将不胜感激！致以最诚挚的问候，尼丁阿乌拉。通常组件 CSS 的作用域仅限于组件内部，我们可以使用 ::ng-deep 来覆盖此行为，并且 CSS 在组件外部可见！如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。（这3个手风琴的最大尺寸）我只是添加下面的 CSS 以确保完整高度传播到手风琴的所有元素，我使用类 custom-accordion 来确保 CSS 仅限于手风琴本身！ HTML ... <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> ... CSS ::ng-deep .custom-accordion .p-accordion-content { height: calc(100% - 54px) !important; } ::ng-deep .custom-accordion .p-toggleable-content, ::ng-deep .custom-accordion .p-accordion-tab, ::ng-deep .custom-accordion p-accordiontab, ::ng-deep .custom-accordion .p-accordion { height:100% !important; } 怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？我不知道为什么你需要一个调整大小的元素，当不需要调整大小时，你可以对flexbox做同样的事情，如果你想这样做，你可以引用bootstrap grids中的CSS！为了实现你想要的，我们可以使用类 p-splitter-gutter 隐藏调整大小栏，我使用类 no-resize 将其范围限定到手风琴级别。 HTML <button (click)="noResize = !noResize">toggle Resize</button> {{noResize}} <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> ... CSS /* disable the resize */ ::ng-deep .no-resize .p-splitter-gutter { display: none !important; } 完整代码 TS import { Component } from '@angular/core'; import { ImportsModule } from './imports'; @Component({ selector: 'splitter-horizontal-demo', templateUrl: './splitter-horizontal-demo.html', standalone: true, imports: [ImportsModule], styles: [ ` ::ng-deep .custom-accordion .p-accordion-content { height: calc(100% - 54px) !important; } ::ng-deep .custom-accordion .p-toggleable-content, ::ng-deep .custom-accordion .p-accordion-tab, ::ng-deep .custom-accordion p-accordiontab, ::ng-deep .custom-accordion .p-accordion { height:100% !important; } /* disable the resize */ ::ng-deep .no-resize .p-splitter-gutter { display: none !important; } `, ], }) export class SplitterHorizontalDemo { noResize = false; documentList = [ { name: 'test' }, { name: 'test1' }, { name: 'test2' }, { name: 'test3' }, { name: 'test4' }, { name: 'test5' }, { name: 'test6' }, ]; paperDocumentList = [ { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, ]; docusignDocumentList = [ { name: 'test', number: 'test', }, ]; noAction(event: any) { event.preventDefault(); return false; } } HTML <button (click)="noResize = !noResize">toggle Resize</button> {{noResize}} <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5" (onResizeEnd)="noAction($event)" (onResizeStart)="noAction($event)" > <ng-template pTemplate> <p-accordion [activeIndex]="0" styleClass="h-full"> <p-accordionTab header="Signed PDF Documents"> <div class="flex justify-content-between"> <div> <h6>Proposal PDF Documents</h6> </div> <div><a>Add Attachment(s)</a></div> </div> <ng-template pTemplate> <p-table [value]="documentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="name"> Attachment Name <p-sortIcon field="name"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.name }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0"> <p-accordionTab header="Papervision Documents"> <div class="flex justify-content-between"> <div> <h6>Scanned Contract Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="paperDocumentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="number"> Customer Number <p-sortIcon field="number"></p-sortIcon> </th> <th pSortableColumn="name"> Customer Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="type"> Doc Type <p-sortIcon field="type"></p-sortIcon> </th> <th pSortableColumn="docNumber"> Doc Number <p-sortIcon field="docNumber"></p-sortIcon> </th> <th pSortableColumn="docDate"> Doc Date <p-sortIcon field="docDate"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.number }}</a></td> <td>{{ doc.name }}</td> <td>{{ doc.type }}</td> <td>{{ doc.docNumber }}</td> <td>{{ doc.docDate }}</td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" class="w-100"> <p-accordionTab header="Docusign Documents"> <div class="flex justify-content-between"> <div> <h6>Docusign Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="docusignDocumentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="name"> Document Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="number"> Doc Id <p-sortIcon field="number"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td>{{ doc.name }}</td> <td><a>{{ doc.number }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> </p-splitter> </div> Stackblitz 演示

css angular primeng primeng-datatable primeng-table

回答 1 投票 0

用一些通用的css代码优化scss嵌套代码

嗨，我正在尝试为某些类别和子类别设计样式。这是代码 const listStyle = styled.div` --填充值：40px；。裹 { 。项目清单， .listItemCategory { 填充...

css sass

回答 1 投票 0

内联块和内联表有什么区别？

据我所知，这些显示选择器似乎是相同的。来自 Mozilla CSS 文档： inline-table：inline-table 值在 HTML 中没有直接映射。它的行为...

html css

回答 3 投票 0

带有独立滚动列的Material UI网格

我希望在 React 中使用 Material UI 制作多个滚动列。我有一种方法可以在 bootstrap 中使用 Flex 来完成此操作，但我无法将其翻译过来。我已经整理了一个黑客演示......

html css reactjs material-ui

回答 5 投票 0

CSS 文件在浏览器中显示为空且未链接到 HTML 文件的问题

我创建了一个custom.css 文件并将其添加到css 文件夹中。之后，我进入该网站。这是行不通的。该文件显示为空。我将附上浏览器中的代码和图片。 .缩略图.

html css hyperlink

回答 1 投票 0

CSS操作的计算顺序

这是我的问题的最小示例：这是我的问题的最小示例： <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> .container { display: flex; height: 500px; /* should not be there */ } .dependent__height { aspect-ratio: 16 / 9; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } 我想要实现的是.container不会设置高度，高度的唯一来源是.source__height。它会在运行时发生变化，一切都应该正常工作。我没有附加到弹性盒或其他东西，我只是想得到想要的行为（宽度将根据长宽比和.source__height的高度计算）我尝试了很多跳跃，还有 JavaScript。如果使用 MutationObserver 和同步高度，JavaScript 可能会工作，但非常笨拙，对于我的用例来说，编写和维护会非常痛苦。如果 .container 设置了高度，则可以正常工作：但如果 height 属性被删除则不然：注意：在现实场景中，我使用 <img> ，问题大致相同，可以通过该问题的解决方案来解决。如果你想要更多真实世界的例子，我也可以添加。这是一种通过网格实现您想要的效果的方法： .container { display: grid; grid-template-columns: 100% max-content; } .dependent__height { aspect-ratio: 16 / 9; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> 但是，如果宽度不够，则 16/9 的依赖高度将无法在该纵横比下增长到所需的完整高度。一种解决方案是将高度设置为 100%，但这会导致其溢出容器（添加轮廓以说明这一点）： .container { display: grid; grid-template-columns: 100% max-content; outline: 4px solid skyblue; } .dependent__height { aspect-ratio: 16 / 9; height: 100%; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> 希望这足以让您玩并获得您想要的东西，如果这不能完全回答所有问题，请通过编辑为您的问题添加详细信息，我可以更新我的答案

javascript html css aspect-ratio mutation-observers

回答 1 投票 0

CSS 背景过滤器忽略过渡持续时间（ReactJS）

我在 React 中有一个组件，它是一个仅有时会弹出的模式。我无法发布所有代码，因为它太多了，但我会简化并发布我能发布的代码。问题：模态应该是

javascript html css reactjs

回答 1 投票 0

打印时将图像格式化为最大尺寸为1页

我正在开发一个显示聊天对话的 html 页面，我希望它能够支持打印机，以便可以轻松导出为 PDF。我的问题是长图像可以跨越多个...

html css pdf printing

回答 3 投票 0

如何在cakephp中内联文本框和按钮

我试图将文本框和提交按钮内嵌在默认布局页面的顶部以进行搜索，但提交按钮却落在文本框下方，弄乱了我的布局。我尝试...