css 相关问题

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

<mat-toolbar>更改所有页面的高度

我是角度新手，所以请帮助我理解。我在我的页面上添加了一个来自角度材料的工具栏，它改变了我的页面的高度。正如您在屏幕截图中看到的，我的页面完全是...

html css angular typescript angular-material

回答 1 投票 0

我的项目引导安装发生了什么？

之前一切正常，但现在我启动了我的网站，但轮播坏了。按钮等也是如此。引导程序发生了什么？我想这有问题......

javascript html css frontend bootstrap-5

回答 1 投票 0

flexbox 中元素之间的行分隔符

我正在尝试使用 display:flex; 制作一行元素在 CSS 中具有相同的文本间距。这是我得到的，我使用 display: inline-block; 实现了它以及文本之间的间距差异 -

css flexbox

回答 3 投票 0

Rails 7 资源管道和字体变量

一个习惯是定义一组根变量以在应用程序中建立一致性，即：根 { --main-font-family：“Helvetica Neue”、Helvetica、Roboto、Arial、sans-serif； -...

css ruby-on-rails asset-pipeline

回答 1 投票 0

如何仅使用<div>标签和Css创建表格

我想仅使用标签和 CSS 创建表格。这是我的示例表。我想仅使用 <div> 标签和 CSS 创建表格。这是我的样本表。 <body> <form id="form1"> <div class="divTable"> <div class="headRow"> <div class="divCell" align="center">Customer ID</div> <div class="divCell">Customer Name</div> <div class="divCell">Customer Address</div> </div> <div class="divRow"> <div class="divCell">001</div> <div class="divCell">002</div> <div class="divCell">003</div> </div> <div class="divRow"> <div class="divCell">xxx</div> <div class="divCell">yyy</div> <div class="divCell">www</div> </div> <div class="divRow"> <div class="divCell">ttt</div> <div class="divCell">uuu</div> <div class="divCell">Mkkk</div> </div> </div> </form> </body> 风格： <style type="text/css"> .divTable { display: table; width:auto; background-color:#eee; border:1px solid #666666; border-spacing:5px;/*cellspacing:poor IE support for this*/ /* border-collapse:separate;*/ } .divRow { display:table-row; width:auto; } .divCell { float:left;/*fix for buggy browsers*/ display:table-column; width:200px; background-color:#ccc; } </style> 但是这个表不适用于IE7及以下版本。请给我你的解决方案和想法。谢谢。 .div-table { display: table; width: auto; background-color: #eee; border: 1px solid #666666; border-spacing: 5px; /* cellspacing:poor IE support for this */ } .div-table-row { display: table-row; width: auto; clear: both; } .div-table-col { float: left; /* fix for buggy browsers */ display: table-column; width: 200px; background-color: #ccc; } 可运行片段： .div-table { display: table; width: auto; background-color: #eee; border: 1px solid #666666; border-spacing: 5px; /* cellspacing:poor IE support for this */ } .div-table-row { display: table-row; width: auto; clear: both; } .div-table-col { float: left; /* fix for buggy browsers */ display: table-column; width: 200px; background-color: #ccc; } <body> <form id="form1"> <div class="div-table"> <div class="div-table-row"> <div class="div-table-col" align="center">Customer ID</div> <div class="div-table-col">Customer Name</div> <div class="div-table-col">Customer Address</div> </div> <div class="div-table-row"> <div class="div-table-col">001</div> <div class="div-table-col">002</div> <div class="div-table-col">003</div> </div> <div class="div-table-row"> <div class="div-table-col">xxx</div> <div class="div-table-col">yyy</div> <div class="div-table-col">www</div> </div> <div class="div-table-row"> <div class="div-table-col">ttt</div> <div class="div-table-col">uuu</div> <div class="div-table-col">Mkkk</div> </div> </div> </form> </body> divs 不应用于表格数据。这与使用表格进行布局一样错误。使用 <table>。它很简单，语义正确，5 分钟内即可完成。这是一个旧线程，但我想我应该发布我的解决方案。我最近遇到了同样的问题，我解决它的方法是遵循如下所示的三步方法，非常简单，没有任何复杂的CSS。（注意：当然，对于现代浏览器，使用 table 或 table-row 或 table-cell 的值来显示 CSS 属性可以解决问题。但是我使用的方法在现代和旧版浏览器中同样有效，因为它确实不要使用这些值来显示 CSS 属性。）三步简单方法对于仅包含 div 的表格，您可以使用以下方法获取单元格和行，就像在表格元素中一样。用块 div 替换表格元素（使用 .table 类）用块 div 替换每个 tr 或 th 元素（使用 .row 类）用内联块 div 替换每个 td 元素（使用 .cell 类） .table {display:block; } .row { display:block;} .cell {display:inline-block;} <h2>Table below using table element</h2> <table cellspacing="0" > <tr> <td>Mike</td> <td>36 years</td> <td>Architect</td> </tr> <tr> <td>Sunil</td> <td>45 years</td> <td>Vice President aas</td> </tr> <tr> <td>Jason</td> <td>27 years</td> <td>Junior Developer</td> </tr> </table> <h2>Table below is using Divs only</h2> <div class="table"> <div class="row"> <div class="cell"> Mike </div> <div class="cell"> 36 years </div> <div class="cell"> Architect </div> </div> <div class="row"> <div class="cell"> Sunil </div> <div class="cell"> 45 years </div> <div class="cell"> Vice President </div> </div> <div class="row"> <div class="cell"> Jason </div> <div class="cell"> 27 years </div> <div class="cell"> Junior Developer </div> </div> </div> 更新1 为了解决注释中thatslch提到的列中所有单元格未保持相同宽度的影响，可以采用以下两种方法之一。指定cell类的宽度 cell {显示：内联块；宽度：340px;} 使用现代浏览器的CSS如下。 .table {显示：表； } .row { 显示：表行；} .cell {显示：表格单元格；} 它对我有用，并且有助于创建响应式表格，有关更多信息，请访问此网站：https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/ #resp-table { width: 100%; display: table; } #resp-table-body{ display: table-row-group; } .resp-table-row{ display: table-row; } .table-body-cell{ display: table-cell; border: 1px solid #dddddd; padding: 8px; line-height: 1.42857143; vertical-align: top; }<div id="resp-table"> <div id="resp-table-body"> <div class="resp-table-row"> <div class="table-body-cell"> col 1 </div> <div class="table-body-cell"> col 2 </div> <div class="table-body-cell"> col 3 </div> <div class="table-body-cell"> col 4 </div> </div> <div class="resp-table-row"> <div class="table-body-cell"> second row col 1 </div> <div class="table-body-cell"> second row col 2 </div> <div class="table-body-cell"> second row col 3 </div> <div class="table-body-cell"> second row col 4 </div> </div> </div> </div> 我没有看到任何考虑 Grid-CSS 的答案。我认为这是一种非常优雅的方法：grid-css 甚至支持行跨度和列跨度。在这里你可以找到一篇非常好的文章： https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611 如果<table>中有任何你不喜欢的东西，也许你可以使用重置文件？或如果您需要此页面布局，请查看 cssplay 布局示例，用于设计没有表格的网站。使用正确的文档类型；它会解决问题。将以下行添加到 HTML 文件的顶部： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 有点偏离主题，但可能会帮助某人获得更清晰的 HTML... CSS .common_table{ display:table; border-collapse:collapse; border:1px solid grey; } .common_table DIV{ display:table-row; border:1px solid grey; } .common_table DIV DIV{ display:table-cell; } HTML <DIV class="common_table"> <DIV><DIV>this is a cell</DIV></DIV> <DIV><DIV>this is a cell</DIV></DIV> </DIV> 适用于 Chrome 和 Firefox 在构建一组自定义布局标签时，我找到了这个问题的另一个答案。这里提供的是自定义标签集及其 CSS 类。 HTML <layout-table> <layout-header> <layout-column> 1 a</layout-column> <layout-column> </layout-column> <layout-column> 3 </layout-column> <layout-column> 4 </layout-column> </layout-header> <layout-row> <layout-column> a </layout-column> <layout-column> a 1</layout-column> <layout-column> a </layout-column> <layout-column> a </layout-column> </layout-row> <layout-footer> <layout-column> 1 </layout-column> <layout-column> </layout-column> <layout-column> 3 b</layout-column> <layout-column> 4 </layout-column> </layout-footer> </layout-table> CSS layout-table { display : table; clear : both; table-layout : fixed; width : 100%; } layout-table:unresolved { color : red; border: 1px blue solid; empty-cells : show; } layout-header, layout-footer, layout-row { display : table-row; clear : both; empty-cells : show; width : 100%; } layout-column { display : table-column; float : left; width : 25%; min-width : 25%; empty-cells : show; box-sizing: border-box; /* border: 1px solid white; */ padding : 1px 1px 1px 1px; } layout-row:nth-child(even) { background-color : lightblue; } layout-row:hover { background-color: #f5f5f5 } 使空单元格和一般单元格具有正确大小的关键是框大小和填充。 Border 也会做同样的事情，但会在行中创建一条线。填充则不然。而且，虽然我还没有尝试过，但我认为边距的作用与填充相同，强制正确渲染空单元格。您可以基于经典表格“div 表”创建“新标签”： <STYLE> dtable { display:table; width:100%; border:1px solid #000; border-spacing:5px; } dtable dtr { display:table-row; clear: both; } dtable dtd { display:table-column; padding:5px; } </STYLE> <DTABLE> <DTR> <DTD>row 1 col 1</DTD> <DTD>row 1 col 2</DTD> </DTR> <DTR> <DTD>row 2 col 1</DTD> <DTD>row 2 col 2</DTD> </DTR> </DTABLE> 您可以为每个“dtd”使用特定的 CSS 选择器，例如： dtable dtd:nth-child(1) { width:300px; font-weight:bold; } dtable dtd:nth-child(2) { width:400px; } 和“斑马”一样： dtable dtr:nth-child(odd) { background-color:#ddd; } 还有更多，请参阅：https://css-tricks.com/useful-nth-child-recipies/ .table {display:block; } .row { display:block;} .cell {display:inline-block;} <h2>Table below using table element</h2> <table cellspacing="0" > <tr> <td>Mike</td> <td>36 years</td> <td>Architect</td> </tr> <tr> <td>Sunil</td> <td>45 years</td> <td>Vice President aas</td> </tr> <tr> <td>Jason</td> <td>27 years</td> <td>Junior Developer</td> </tr> </table> <h2>Table below is using Divs only</h2> <div class="table"> <div class="row"> <div class="cell"> Mike </div> <div class="cell"> 36 years </div> <div class="cell"> Architect </div> </div> <div class="row"> <div class="cell"> Sunil </div> <div class="cell"> 45 years </div> <div class="cell"> Vice President </div> </div> <div class="row"> <div class="cell"> Jason </div> <div class="cell"> 27 years </div> <div class="cell"> Junior Developer </div> </div> </div>

html css

回答 11 投票 0

无法覆盖 Bootstrap 5 实用程序

我的SCSS结构：主要.scss： @import '~bootstrap/scss/functions'; @import '主题/变量'; @import '~bootstrap/scss/bootstrap'; @import '主题/主题'; 主题.scss： ... @import“实用程序&qu...

css twitter-bootstrap sass bootstrap-5

回答 3 投票 0

尝试获取页面上弹性容器旁边的图像

这个网站太棒了 Lorem ipsum dolor sat amet consectetur，adipisicing elit。南，还是自然？卷... <div class="second-part"> <h2>This website is awesome</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam, aut natus? Voluptate vel delectus ipsum unde maxime facere aliquid reiciendis quia est enim ducimus magni deleniti repudiandae eveniet, cumque quis.</p> <div> <button class="btn">Sign up</button> </div> </div> <div class="right-img"> <img src="https://images.pexels.com/photos/6194848/pexels-photo-6194848.jpeg?auto=compress&cs=tinysrgb&w=400" alt="brittany spaniel in forest looking at the sky"> </div> .second-part { display: flex; align-items: left; margin-left: 200px; flex-direction: column; max-width: 40%; 我将图像放在与 Flex 中的项目不同的单独 div 中，并且我认为图像将放在页面右侧的剩余空间上。我不确定这是否是容器问题，但我希望能解释一下为什么图像没有填满页面的右侧。第二部分和右图像这两个 div 元素是块级元素。如果您想保持相同的 HTML 结构而不添加整体包含块，将它们并排的一种方法是使第二部分浮动。 .second-part { display: flex; float: left; align-items: left; margin-left: 200px; flex-direction: column; max-width: 40%; background-color: pink; } <div class="second-part"> <h2>This website is awesome</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam, aut natus? Voluptate vel delectus ipsum unde maxime facere aliquid reiciendis quia est enim ducimus magni deleniti repudiandae eveniet, cumque quis.</p> <div> <button class="btn">Sign up</button> </div> </div> <div class="right-image"> <img src="https://images.pexels.com/photos/6194848/pexels-photo-6194848.jpeg?auto=compress&cs=tinysrgb&w=400" alt="brittany spaniel in forest looking at the sky"> </div>

html css

回答 1 投票 0

RSelenium：单击按钮后无法从页面中提取 Href

我正在尝试使用 R 中的 RSelenium 自动进行网页抓取。我已使用 RSelenium 成功找到并单击了网页上的按钮，但我在从页面提取 href 属性时遇到问题

javascript html css r rselenium

回答 1 投票 0

在 td 标签内打印时强制分页

我目前正在我们的应用程序中设计打印样式。我们希望在每个页面上重复页眉/页脚。在查看了 pagedjs 并尝试从几乎没有实现的 @page 规范中榨取一些东西之后，我

javascript html css

回答 1 投票 0

当图像 src 随反应状态更改时，过渡或动画不起作用

下面的代码过渡或动画不起作用，但图像刚刚发生变化。样式：{ 图像样式：{ 不透明度：1，过渡：“不透明度 0.5s 线性”，高度...

css reactjs css-animations css-transitions

回答 2 投票 0

使用hostinger在wordpress上升级CSS时出现问题

基本上我正在做我的第一个互联网作品集。我正在使用 Hostinger 和 wordpress.com。我想创建自己的主题，所以我在 wpcontet/themes 中创建一个名为 mytheme 的文件夹并放入我的猪圈...

php css wordpress styles

回答 1 投票 0

如何去除文字装饰下划线；来自 flex 父级内部的 span 元素？

我想删除标签内的标签的下划线，该标签的显示为：flex;财产。在我的例子中，标签必须是flex的。我已经搜索过这个问题了... 我想从 <span> 标签内的 <p> 标签中删除下划线，该标签具有 display: flex; 属性。在我的例子中，<p>标签必须是flex的。我已经在互联网上搜索过这个问题，并找到了不适用于弹性父母的解决方案。他们说在跨度中添加 text-decoration: none; 和 display: inline-block; 应该可以解决问题，但事实并非如此。 <p style="display: flex; gap: 10px; text-decoration: underline;"> This should have underline <span style="text-decoration: none; display: inline-block;">This should not have underline</span> </p> <p style="display: flex; gap: 10px;"> <span style="text-decoration: underline;">This should have underline</span> <span style="display: inline-block;"> <span style="text-decoration: none;">This should not have underline</span> </span> 您需要像这样用 span 包裹您的 display: inline-block;。

html css

回答 1 投票 0

响应式网格，图像保持宽高比

我正在尝试创建一个类似于所附图表的布局。（左侧为桌面版，右侧为移动版。）布局应该是响应式的（理想情况下是流畅的，但不是必需的）。每个图像（由 g...

css flexbox css-grid responsive masonry

回答 1 投票 0

密码测试器 - 满足要求时帮助显示复选标记

我正在尝试使用密码强度测试器制作一个项目，并且已经使其大部分工作正常。我正在努力在完成后在数字、标志和大字母上打勾......

javascript java html css sass

回答 1 投票 0

固定元素相对于其父元素的定位

我有一个元素在拖动时获得位置：固定。该元素位于模态框内，该模态框是 body 元素的直接子元素。在下图中，模态框是灰色的，身体的其余部分是......