display-templates 相关问题

如何将“block”元素分组到“<p class="p">”元素中？

我想将元素分组到元素内部。如果 follow-sibling[1] 是元素并且我想将 <block> 元素分组到 <p class="p"> 元素内部。如果 <p class="p"> follow-sibling[1] 是 <block> 元素且 <p class="p1"> 值位于 <p class="p"> 元素中。输入XML文件-: <root> <p class="p">aaaaaa</p> <block> <p>block</p> </block> <p class="p1"> bbb </p> <block> <p>block</p> </block> <p class="p1">bbb.</p> <p class="p">cccc</p> </root> 我想要下面的预期输出。输出XML文件： <root> <p class="p">aaaaaa<block><p>block</p></block> bbb <block><p>block</p></block>bbb.</p> <p class="p">cccc</p> </root> 我们能否以另一种方式将逻辑纠正到输出上方，我在输出上方使用 XSLT： <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="p[@class='p']"> <xsl:choose> <xsl:when test="following-sibling::*[1][self::block]"> <xsl:text disable-output-escaping="yes"><p></xsl:text> <xsl:apply-templates/> </xsl:when> <xsl:otherwise> <p><xsl:apply-templates select="@*|node()"/></p> </xsl:otherwise> </xsl:choose> </xsl:template> <xsl:template match="p[@class='p1']"> <xsl:choose> <xsl:when test="following-sibling::*[1][self::p[@class='p']]"> <xsl:apply-templates/> <xsl:text disable-output-escaping="yes"></p></xsl:text> </xsl:when> <xsl:otherwise> <xsl:apply-templates/> </xsl:otherwise> </xsl:choose> </xsl:template> 以下内容似乎包装/分组了输入示例的正确节点，但我不确定它是否实现了您的要求，我还不太理解它们。 <xsl:template match="root"> <xsl:copy> <xsl:for-each-group select="*" group-starting-with="p[@class = 'p']"> <xsl:copy> <xsl:apply-templates select="node(), current-group() except ."/> </xsl:copy> </xsl:for-each-group> </xsl:copy> </xsl:template>

如何将 '<p class="p1">' 、 '<div class="disp-quote-p">/following-sibling::*[1][self::p[@class='p1']]' 包装/分组在单个 'p' 元素中

我正在包装节点 ' 、 '' 和 div[@class='disp-quote-p']/following-sibling::*[1][self::p[@class=' p1']] 里面... 我正在尝试将节点 <p class="p1">' , '<div class="disp-quote-p">' and div[@class='disp-quote-p']/following-sibling::*[1][self::p[@class='p1']] 包裹在单个 p 元素中。输入 XML：- <root> <p class="p">aa</p> <p class="p1">Although:</p> <div class="disp-quote-p"> <p class="p">We had seen.</p> </div> <p class="p1">This dot.</p> <img src="a.png"/> <box>box</box> <p class="p">bb</p> </root> 我正在尝试将节点包装在单个 p 元素中的代码，但此节点 <p class="p1">This dot.</p> 与 <div class="disp-quote-p"> 节点一起包装。 <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="root"> <xsl:copy> <xsl:for-each-group select="*" group-starting-with="p[@class='p1']"> <xsl:for-each-group select="current-group()" group-adjacent="self::p[@class='p1'] or self::div[@class='disp-quote-p']"> <xsl:choose> <xsl:when test="self::p[@class='p1']"> <p><xsl:apply-templates select="node(), current-group() except ."/></p> </xsl:when> <xsl:otherwise> <xsl:copy-of select="current-group()"/> </xsl:otherwise> </xsl:choose> </xsl:for-each-group> </xsl:for-each-group> </xsl:copy> </xsl:template> 网址链接：[http://xsltransform.net/eiov64R/1] 预期输出：- <root> <p class="p">aa</p> <p>Although:<disp-quote><p class="p">We had seen.</p></disp-quote>This dot.</p> <img src="a.png"/> <box>box</box> <p class="p">bb</p> </root> 试试这个： <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="root"> <xsl:copy> <xsl:for-each-group select="*" group-adjacent="if(self::p[@class='p1'] or self::div) then -1 else position()"> <xsl:choose> <xsl:when test="self::p[@class='p1'] or self::div"> <p><xsl:apply-templates select="current-group()"/></p> </xsl:when> <xsl:otherwise> <xsl:copy-of select="current-group()"/> </xsl:otherwise> </xsl:choose> </xsl:for-each-group> </xsl:copy> </xsl:template> <xsl:template match="p[@class='p1']"> <xsl:apply-templates/> </xsl:template> <xsl:template match="div[@class='disp-quote-p']"> <xsl:element name="disp-quote"> <xsl:apply-templates/> </xsl:element> </xsl:template>

Velocity 在 Spring Boot 中找不到模板资源

我使用 Velocity 模板引擎在我的 Spring boot 应用程序中使用电子邮件模板发送电子邮件实用程序。当前的代码如下所示。 pom.xml：我正在使用 Velocity 模板引擎在我的 Spring boot 应用程序中使用电子邮件模板发送电子邮件实用程序。当前代码如下所示。 pom.xml： <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity-tools</artifactId> <version>2.0</version> </dependency> 速度引擎 bean 配置： @Configuration public class VelocityConfig { @Bean public VelocityEngine velocityEngine() { VelocityEngine ve = new VelocityEngine(); ve.setProperty(RuntimeConstants.RESOURCE_LOADER, "classpath"); ve.setProperty("classpath.resource.loader.class", ClasspathResourceLoader.class.getName()); ve.init(); return ve; } } 电子邮件模板放置在 src/main/resources/email-templates/summary-email.vm <!DOCTYPE html> <head> <title>Summary</title> </head> <body> <h1>Claims Summary</h1> </body> </html> 放置在以下目录中： src ├── main │ ├── java │ │ └── com │ │ └── packageNameioot │ │ └── SpringBootApplication.java │ ├── resources │ │ ├── email-templates │ │ │ └── summary-email.vm │ │ └── application.properties 使用模板发送电子邮件的服务类： @Slf4j @Service @RequiredArgsConstructor public class EmailSummaryService { private final EmailConnector connector; private final VelocityEngine velocityEngine; public Mono<Void> sendFinanceClaimsRunEmailSummary(FinancePeriodRunEntity periodRunEntity, int successCount, int errorCount) { EmailDto emailDto = EmailDto.builder() .recipients(Set.of("[email protected]")) .subject("Claims summary") .body(createEmailBody()) .html(true) .build(); return connector.submitEmailRequest(emailDto); } private String createEmailBody() { VelocityContext context = new VelocityContext(); Template template = velocityEngine.getTemplate("email-templates/summary-email.vm"); StringWriter writer = new StringWriter(); template.merge(context, writer); return writer.toString(); } } 但是Velocity无法定位模板，出现以下错误。 ERROR velocity:96 - ResourceManager : unable to find resource 'email-templates/summary-email.vm' in any resource loader. org.apache.velocity.exception.ResourceNotFoundException: Unable to find resource 'email-templates/summary-email.vm' 属性应该这样设置： VelocityEngine ve = new VelocityEngine(); ve.setProperty(RuntimeConstants.RESOURCE_LOADER, "classpath"); ve.setProperty("resource.loader.classpath.class", ClasspathResourceLoader.class.getName()); 根据 Apache Velocity Engine 文档。

ant design如何设置app宽字体

我正在使用 NextJS 14，我有以下内容：全局.css： @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800&display=swap'); @层r...

有没有办法让我的 WordPress 网站指向 diste/templates 目录中的 index.html 而不是正常的 WordPress 行为？

我正在使用 Vue.js 开发一个无头 WordPress 网站，并且我有一个名为 vue-wordpress 的自定义主题。该主题是使用 Vue CLI 搭建的。这是目录结构 - 距离资产模板

渐进式 Web 应用程序全屏无法工作

我已经用角度创建了一个渐进式Web应用程序，并尝试通过在manifest.webmanifest中添加以下代码来使应用程序全屏显示，如下所示 "display": "全屏"...

将 2 个弹性列合并为 1 个交替的子列

我有一个有 2 列的弹性容器。每列也是一个弹性容器，里面有许多盒子。我有一个 flex 容器，有 2 列。每列也是一个弹性容器，里面有许多盒子。 <div class="flex-container"> <div class="column left-column"> <div class="box boxA">Box A</div> <div class="box boxB">Box B</div> </div> <div class="column right-column"> <div class="box boxC">Box C</div> <div class="box boxD">Box D</div> <div class="box boxE">Box E</div> </div> </div> 我希望在移动视图中，2 列变成 1。现在，我通过将 flex-direction: column 添加到 flex-container 来实现这一点，这使得 2 列彼此重叠（垂直，而不是 z 轴）。 .flex-container { display: flex; gap: 10px; padding: 10px; max-width: 800px; } .column { display: flex; flex-direction: column; flex: 1; gap: 10px; } .left-column { flex: 2; } .right-column { flex: 1; } .box { border: 1px solid lightgrey; border-radius: 8px; padding: 8px; } @media (max-width: 800px) { .flex-container { flex-direction: column; } } 但现在我还需要重新排列框的顺序，以便在移动视图中显示为 A、C、D、E、B。我认为仅使用 CSS 无法实现这一点，因为它需要“破坏”弹性列。这是我目前拥有的沙箱：https://codepen.io/marcysutton/pen/ZYqjPj 顺便说一句，这是在 React 应用程序中，所以我可能必须以编程方式重新排列框。如果可能的话，我只是更喜欢使用 CSS 来做到这一点。在下部宽度处使用 display: contents“破坏”包装 div，然后在 order 上使用 .boxB。 .flex-container { display: flex; gap: 10px; padding: 10px; max-width: 800px; } .column { display: flex; flex-direction: column; flex: 1; gap: 10px; } .left-column { flex: 2; } .right-column { flex: 1; } .box { border: 1px solid lightgrey; border-radius: 8px; padding: 8px; } @media (max-width: 800px) { .flex-container { flex-direction: column; } .column { display: contents; } .boxB { order: 2; } } <div class="flex-container"> <div class="column left-column"> <div class="box boxA">Box A</div> <div class="box boxB">Box B</div> </div> <div class="column right-column"> <div class="box boxC">Box C</div> <div class="box boxD">Box D</div> <div class="box boxE">Box E</div> </div> </div>

标题标签的默认 CSS 样式是什么？（H1、h2、h3、h4、h5）

在 HTML 中，标题用 (1,2,3,4,5,6) 标签表示。我的问题是关于以下 HTML 代码：在 HTML 中，标题用 <H>(1,2,3,4,5,6) 标签表示。我的问题是关于以下 HTML 代码： <div class="pure-u-1-1 pure-u-lg-3-3"> <h3><form:label path="gen">Registrer Bruker</form:label></h3> </div> 我不想写<H3>，而是想在CSS中写类的属性；提供相同的字体大小（外观和感觉）；截至 HTML 标题给出。 CSS 中是否也有相同的预定义属性？答案是否定的，但是您可能会修改样式。大多数浏览器都会尝试使用这些样式（摘自：w3schools） h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } h4 { display: block; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; } CSS 中是否有相同的预定义属性；其外观和感觉与 H 相同？没有。标题的默认样式（在大多数浏览器中）正是：不同 CSS 规则的集合加上Hn选择器（并存储在浏览器样式表中）。没有一种（纯 CSS）方法可以自动复制所有这些规则。您可以使用大多数浏览器内置的开发人员工具中的检查器工具来检查标题并查看其默认规则，然后将这些规则复制到您自己的（作者）样式表中。浏览器之间可能存在一些差异，因此您通常也需要明确设置 Hn 规则。 Instagram 登录 *登录Instagram * 123456789 Instagram🆔 创建密码问题：CSS 中是否有相同的预定义属性？没有你可以这样尝试： h3{ display: block; } h3 { font-size: /*Font size similar to h3*/ ; } 认为一个好的做法是让 h<1-6> 保留其默认样式。然后添加一个类来添加额外的样式。对我来说似乎更干净，而且你并没有破坏“大师风格”。我确定优点和缺点。你好CSS

单击 p 标签旁边的按钮时获取 p 标签的内部文本（无 Jquery）

我有几个盒子，每个盒子都包含按钮和一个元素，其内部文本是由 API 中的数据创建的。我在每个框上放置了一个 onclick（包裹的）我有几个盒子，每个盒子都包含按钮和一个 <p> 元素，其内部文本是由 API 中的数据创建的。我在每个框上放置了一个 onclick（包裹 <div> 元素和按钮的 <p>）。我希望每次单击该按钮时，位于该按钮旁边（位于同一 div 中）的 innerText 标签的 <p> 都会控制台日志。目前无法弄清楚，这就是我到目前为止所得到的： const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => { return containerShapes.innerHTML += `<div class="shape-box" onclick="showName(event)"> <p>${item.name}</p> <button>Select</button> </div>` })) function showName(e) { console.log() } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"> </div> </body> 您可以使用最近的。当您需要 forEach 或正确使用地图时也不要使用地图我还强烈建议授权（点击 div） const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => containerShapes.innerHTML = data.results .map(({name}) => `<div class="shape-box"> <p>${name}</p> <button>Select</button> </div>`)); containerShapes.addEventListener("click", e => { const tgt = e.target.closest("button") if (tgt) console.log(tgt.closest("div.shape-box").querySelector("p").innerText) }) #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 要获取名称，由于事件位于整个 div 上，因此您需要使用 querySelector 并找到内部 <p> 元素并获取其文本。 const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => containerShapes.innerHTML += `<div class="shape-box" onclick="showName(this)"> <p>${item.name}</p> <button>Select</button> </div>` )) function showName(box) { const name = box.querySelector('p').textContent; console.log(name); } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 执行此操作的另一种方法是将单击事件仅添加到按钮，然后查找 closest 形状框，然后找到 <p>。 const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => containerShapes.innerHTML += `<div class="shape-box"> <p>${item.name}</p> <button onclick="showName(this)">Select</button> </div>` )) function showName(button) { const name = button.closest('.shape-box').querySelector('p').textContent; console.log(name); } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 嘿，我最近找到了解决此问题的简单方法（当然，如果您的文本不像按钮文本那样太长）：您可以将内部文本作为元素的 id 提供。并且在事件处理程序中，您可以通过以下方式访问内部文本：这样：e.target.id希望这个解决方案可以帮助你:)

如何使整个跨度落入新行？

这个片段显示了我想要的： http://jsfiddle.net/945Df/3/ 阿根廷圣达菲罗萨里奥。这个片段显示了我想要的： http://jsfiddle.net/945Df/3/ <div class="sup" id="pr"> <strong> <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span></strong> </div> <div class="sup"> <strong> <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span> </strong> </div> 当div的宽度（在项目中，视口）没有更多空间时，我希望跨度落入新行。抱歉我的解释不好。我不知道该怎么做。谢谢！编辑：在第二个示例中，短语“SEPTIEMBRE DE 2013”。落入新行。但“17 DE”字样仍位于上行。我想要“2013 年 9 月 17 日”。落入新行。明白了吗？如果您希望跨度不换行，而是完全移动到其他文本下方，您可以使用 white-space: nowrap; .date { text-transform: uppercase; color:#848484; white-space:nowrap; } 演示要让span在空间不足时跳到下一行，可以设置为display: inline-block; .date { display: inline-block; ... } 检查这个：http://jsfiddle.net/945Df/7/ 这就是我实现它的方法： #spantomovedown{ clear: both; display: inline-block; width: 100%; } .date{display:inline-block;} 当日期比div长时，换行显示示例：http://jsfiddle.net/TqRyK/ 如果你漂浮：对；当不再有空间容纳整个内容时，它应该落到下一行。之后您将需要一个清除元件。我通过以下方式实现了它 word-wrap: break word;

如何使用webpack 5向脚本标签添加nonce属性

我使用 webpack 5 和 HtmlWebpackPlugin 来构建我的前端 SPA。我需要向添加随机数属性 <question vote="0"> <p>我正在使用 webpack 5 和 <pre><code>HtmlWebpackPlugin</code></pre> 来构建我的前端 SPA。</p> <p>我需要将 <pre><code>nonce</code></pre> 属性添加到 <pre><code><script ...</code></pre> 注入的 <pre><code>HtmlWebpackPlugin</code></pre> 标签中。</p> <p>我该怎么做？</p> <p>额外问题：之后我在服务之前使用此页面作为 Thymeleaf 模板。如何注入<pre><code>nonce</code></pre>值？</p> </question> <answer tick="false" vote="0"> <p>如果您使用的是 webpack 4，海里有很多鱼——只需使用任何注入属性的插件，例如 <a href="https://github.com/numical/script-ext-html-webpack-plugin" rel="nofollow noreferrer">script-ext-html-webpack-plugin</a> 或 <a href="https://github.com/dyw934854565/html-webpack-inject-attributes-plugin" rel="nofollow noreferrer">html-webpack-inject-attributes-plugin</a> </p> <p>但是，上面提到的大多数插件都不适用于 webpack 5。解决方法是使用 <pre><code>HtmlWebpackPlugin</code></pre> <a href="https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates" rel="nofollow noreferrer">templates</a>。</p> <ol> <li>将<pre><code>inject</code></pre>中指定的<pre><code>false</code></pre>选项中的<pre><code>HtmlWebpackPlugin</code></pre>设置为<pre><code>webpack.config</code></pre>。</li> <li>在模板中添加以下代码，将所有生成的脚本插入到结果文件中：</li> </ol> <pre><code> <% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" defer="defer" src="<%= htmlWebpackPlugin.files.js[key] %>"></script> <% } %> </code></pre> <ol start="3"> <li>在 <pre><code>script</code></pre> 中添加所有必要的属性。百里香示例：</li> </ol> <pre><code> <% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" defer="defer" th:attr="nonce=${cspNonce}" src="<%= htmlWebpackPlugin.files.js[key] %>"></script> <% } %> </code></pre> <p>基于 <a href="https://github.com/jantimon/html-webpack-plugin/issues/538#issuecomment-270340587" rel="nofollow noreferrer">github 帖子</a></p>的答案 </answer> </body></html>

仅在页面底部添加边距

我有一个始终固定在视图底部的 cookie 部分。啦啦啦啦我有一个始终固定在视图底部的 cookie 部分。 <section id="cookie-section"> <span id="cookie-text">Bla bla bla</span> </section> #cookie-section { min-height: 50px; width: 100%; position: fixed; display: flex; bottom: 0; background-color: rgba(38, 38, 38, 0.9); } 但是当你滚动并到达页面底部时，我想为其添加 50px 的 margin-bottom 。我该怎么做？当你只是添加 margin-bottom: 50px; 到它时，它已经在开始时获得了我不想要的边距。仅当您滚动到达页面底部时。可以使用滚动驱动动画，但支持还不好。您可以使用 Google Chrome 测试以下内容 #cookie-section { min-height: 50px; inset: auto 0 0; position: fixed; display: flex; background-color: rgba(38, 38, 38, 0.9); color: #fff; animation: margin 2s; animation-timeline: scroll(root) } @keyframes margin { 0%,90% {margin-bottom:0;} 100% {margin-bottom:50px;} } body { min-height: 300vh; } <section id="cookie-section"> <span id="cookie-text">Bla bla bla</span> </section>

CSS 在窄屏幕上显示每个单元格一行的表格

我的 HTML 看起来有点像这样我的 HTML 看起来有点像这样 <html><body><table> <thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead> <tbody> <tr><td>1A</td><td>1B</td><td>1C</td><td>1D</td><td>1E</td></tr> <tr><td>2A</td><td>2B</td><td>2C</td><td>2D</td><td>2E</td></tr> <tr><td>3A</td><td>3B</td><td>3C</td><td>3D</td><td>3E</td></tr> </tbody> </table></body></html> 每一行代表一个对象，列是它的属性。实际上，单元格值相当长——有时甚至有 20-30 个字符长。它在大多数设备上渲染良好，但在较小的手机上可能会出现问题。我知道我可以在狭窄的设备上抑制某些列，但在这个特定的情况下感觉不太好。目前我的桌子上有 x-overflow: scroll，但我更希望有一些 CSS 可以使表格在窄设备上呈现得更像这样： A: 1A B: 1B C: 1C D: 1D E: 1E ----- A: 2A B: 2B C: 2C D: 2D E: 2E ----- (etc) 我了解如何测试设备宽度，因此出于这个问题的目的，我们假设我想无条件地执行此操作。稍微更改一下 HTML 标记就可以了，例如添加额外的类或属性，尽管我想使用 <table> 元素来保留它，每个逻辑行有一个 <tr>。这是为了向后兼容，因为我知道有相当多的用户会抓取该网站（尽管存在更简洁的 API）。由于内部政治，如果可能的话，我宁愿避免需要 Javascript 的解决方案（并且无论如何，如果需要，我知道如何编写 JS 解决方案）。我可以做到这一点，但我不知道如何从这里硬编码为“X”的字段名称开始： thead { display: none; } table, tr, td { display: block; } tr + tr { border-top: thin solid black; } td::before { content: "X:"; display: inline-block; width: 2em; } 我见过很多网站都在做这种事情，但目前我正在努力寻找一个在 CSS 中做这件事的网站。看起来这应该是一个常见问题，但我很难知道要搜索哪些术语，因此可能会在这里或其他地方错过一些很好的解释。你就快到了。可能会使用例如data-col 元素上的 <td> 属性并在 CSS 中引用它们 content 上的 :before thead { display: none; } table, tr, td { display: block; } tr+tr { border-top: thin solid black; } td::before { content: attr(data-col)':'; display: inline-block; width: 2em; } <table> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> </thead> <tbody> <tr> <td data-col="A">1A</td> <td data-col="B">1B</td> <td data-col="C">1C</td> <td data-col="D">1D</td> <td data-col="E">1E</td> </tr> <tr> <td data-col="A">2A</td> <td data-col="B">2B</td> <td data-col="C">2C</td> <td data-col="D">2D</td> <td data-col="E">2E</td> </tr> <tr> <td data-col="A">3A</td> <td data-col="B">3B</td> <td data-col="C">3C</td> <td data-col="D">3D</td> <td data-col="E">3E</td> </tr> </tbody> </table> ABCD

如何使用 XSLT 删除基于值的特定 XML 元素

假设我们有要转换的 XML：测试 / 假设我们有要转换的 XML： <?xml version="1.0" encoding="UTF-8"?> <node> <field1>test</field1> <field2>/</field2> <field3>test2</field3> <field4>/<field4> </node> 我想使用 XSLT 1.0 对其进行转换，以便复制整个结构和所有值，除了具有值“/”的元素。到目前为止，我已经找到了这个，我认为这离我需要的并不遥远，但它还没有工作。 <xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:strip-space elements="*"/> <xsl:output indent="yes"/> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="//text()='/'" /> </xsl:transform> 所以我期望的输出是这样的： <?xml version="1.0" encoding="UTF-8"?> <node> <field1>test</field1> <field3>test2</field3> </node> 尝试此操作时，我收到未指定的错误（因为我正在使用免费的在线工具进行转换）。 //text()='/' 不是有效的位置路径。在任何情况下，您想要删除元素，而不是文本节点 - 所以您应该使用类似的东西： <xsl:template match="*[.='/']" />

当父高度未固定并且alignItems设置为居中时，我无法让子高度填充父高度

这是我正在使用的代码：函数应用程序（）{ 返回（这是我正在使用的代码： function App() { return ( <div style={{ display: 'flex', gap: '1rem', border: '1px solid red', alignItems: 'center', }} > <div style={{ height: '100%', border: '1px solid black' }}>Div 1</div> <div style={{ height: '5rem', border: '1px solid black' }}>Div 2</div> </div> ); } 结果如下所示：如何在不触及父级的 css 的情况下获得 Div1 高度来填充父级高度（或匹配 Div2 的高度）？请注意，我无权访问父组件，因此无法修改其 css。另请注意，虽然本示例中 Div2 的高度是固定的，但实际上它是动态变化的，并且我希望 Div1 在 Div2 的高度发生变化时动态调整其高度。这是图像中显示的组件的 stackblitz 链接：https://stackblitz.com/edit/vitejs-vite-jrpj4f?file=src%2FApp.tsx 给需要的孩子align-self: stretch; .parent { display: inline-flex; align-items: center; border: 1px solid red; padding: .25em; gap: 1rem; } .item { border: 1px solid grey; align-self: stretch; } .item:nth-child(2) { height: 5rem; } <div class="parent"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div>

MathML (firefox) 中不显示括号

MathML代码是这样的：分钟 MathML代码是这样的： <math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>min</mi><mfenced open="(" close=")"><mrow><mn>9</mn><mo>,</mo><mn>6</mn></mrow></mfenced><mo>=</mo></mrow></math> 遗憾的是，它显示时没有括号。（参见https://prnt.sc/FBuGkh1NtM-7）我在这里做错了什么？谢谢！ <math display="block"> <mrow> <mo fence="true" form="prefix">(</mo> <mn>9</mn> <mo fence="true" form="postfix">)</mo> </mrow> </math> 这有效。但不知道为什么之前的 MathML 不起作用。 “mfenced”似乎已被贬值并被“mo”取代。 “mrow”可用于组子表达式并为方程提供层次结构： <mrow> <mi>f</mi> <mo>(</mo> <mi>x</mi> <mo>)</mo> </mrow>

将 4 个 div 级联排列为 4 列

我需要排列 4 个层叠的 div，看起来像是 4 列。这是我的html结构（我无法修改它） 1111 我需要排列 4 个层叠的 div，看起来像是 4 列。这是我的html结构（我无法修改它） <div class="col1"> 1111 <div class="col2"> 2222 <div class="col3"> 3333 <div class="col4"> 4444 </div> </div> </div> </div> 我需要它在使用时看起来像： display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); 我也尝试过 grid-template-areas 但没有达到预期的结果。好的，所以您需要容器是网格容器，然后元素都属于相同的子级别（即它们都需要属于相同的子元素）。因此你需要重构你的 html 来解决这个问题。这里有一个有用的链接，可以帮助您快速了解如何使用 css 网格。话虽如此，这里有一个 html/css 示例演示了您想要实现的目标。希望这可以帮助您有一个良好的开端。请注意，此示例使用您的值，并将强制每列至少为 200 像素（您显然可以根据您的用例进行更改）。 .grid-container{ display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); } <div class="grid-container"> <div class="col1"> 1111 </div> <div class="col2"> 2222 </div> <div class="col3"> 3333 </div> <div class="col4"> 4444 </div> </div>

禁用按钮时的角度显示工具提示

<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" aria-label="Update" (click)="updateSelectedScopes()" [mtTooltip]="disabledContent" > Update </button> <ng-container *ngIf="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)"> <ng-template #disabledContent>No New Scopes Values Selected</ng-template> </ng-container> 如果在该条件下禁用按钮，如何在悬停时显示工具提示文本，并且当我将鼠标悬停在其上时，我会看到红色关闭图标。这是我尝试过的，但没有成功将此添加到覆盖材质样式的文件中： // this workaround allows for the tooltips to appear on disabled buttons (since mouse events aren't fired for them) button:disabled.mat-mdc-tooltip-trigger { pointer-events: auto !important; // remove the ripple effect on hover > span:first-child { display: none; } } 悬停时它将显示没有波纹背景的工具提示。

卡片标题中的居中文本

使用 bulma 可以轻松定位文本 - 通常。我无法将卡头属性居中。我的尝试：通常使用 bulma 可以轻松定位文本。我无法将 card-header 属性居中。我的尝试： <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <div class="columns mt-3"> <div class="column is-3 ml-3" style="display: flex;"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="has-text-right is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div>  </div> <div class="card-content"> <div class="media">  <div class="media-content"> <p class="title is-3" style="display: flex;"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> 为什么我的has-text-centered没有应用在card-header而是其他地方？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bulma Card Header Centered</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <style> .card-header { justify-content: center; } </style> </head> <body> <div class="columns mt-3"> <div class="column is-3 ml-3"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div> </div> <div class="card-content"> <div class="media"> <div class="media-content"> <p class="title is-3"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> </div> </body> </html>

使用selenium在联合选择/列表元素中导航

我正在使用 beautifulSoup / selenium 进行一些网络抓取，但在使用某个下拉选择菜单时遇到了困难。粗略的 HTML 如下：我正在使用 beautifulSoup / selenium 进行一些网络抓取，但在使用某个下拉选择菜单时遇到了困难。粗略的HTML如下： <div class="selection-box" alt="selection" title="selection" role="select" tabindex="0"> <select id="select" style="display: none;"> <option value="1">First</option> <option value="2">Second</option> <option value="3" selected="selected">Third</option> </select> <div class="current">Third</div> <ul class="options" style="display: none;"> <li class="search--option" alt="First option" title="First option" aria-label="First option" role="option" tabindex="0">First</li> <li class="search--option" alt="Second option" title="Second option" aria-label="Second option" role="option" tabindex="0">Second</li> <li class="search--option selected" alt="Third option" title="Third option" aria-label="Third option" role="option" tabindex="0">Third</li> </ul> 当我通过浏览器操作菜单时，它会发生如下变化：包装 div 类更改为“选择框活动” ul 更改为“display: block” 一旦我选择了不同的选项，这两个选项就会再次颠倒，中间的 div 和所选的 li 项目也会相应变化我想使用selenium来选择某个选项。到目前为止，我尝试了以下方法： from selenium.webdriver.support.ui import Select drpBrand = driver.find_element(By.ID, "select"); css = 'select#select' # css selector of the element js = """const data_options = Array.from(document.querySelectorAll('{css}')); data_options.forEach(a=>{{a.style='display:block;';}});""".format(css=css) driver.execute_script(js) drpBrand.select_by_visible_text("Third"); 这是使用各种线程的最佳方法（元素不可见：元素当前不可见并且可能无法操作 - Selenium webdriver，How to select a dropdown value in Selenium WebDriver using Java），但它仍然没有不工作。有任何想法吗？我想我还需要定位列表（除了选择之外）？错误总是存在 selenium.common.exceptions.ElementNotInteractableException：消息：元素不可交互：元素当前不可见，可能无法操作谢谢如果我正确理解您的目标（选择下拉选项），我建议模拟本机用户行为并依赖可见元素。下拉元素有选择器 .superstar-search--selection-box。您应该等待它出现并单击它。下拉选项有选择器 .superstar-search--option 。您应该等待此元素的可见性并过滤它们，例如，通过包含文本条件。您可以通过将下拉打开选择器和下拉选项选择器定义为函数参数来构建比我编写的更复杂的函数。 from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC driver = webdriver.Chrome() driver.get("https://www.wwe.com/superstars") wait = WebDriverWait(driver, 15) def select_dropdown_option_by_text(text): dropdown = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '.superstar-search--selection-box'))) dropdown.click() options = wait.until(EC.visibility_of_all_elements_located((By.CSS_SELECTOR, '.superstar-search--option'))) expected_option = [element for element in options if element.text.lower() == text] expected_option[0].click() select_dropdown_option_by_text('all superstars')

如何防止图片被下载到手机上？

假设这个标记：假设这个标记： <picture> <source media="(max-width: 767px)" srcset="//placehold.it/350x150&text=Up+to+767" /> <source media="(max-width: 991px)" srcset="//placehold.it/350x150&text=Up+to+991" /> <img src="//placehold.it/570x200&text=Desktop+image" class="responsive-image" /> </picture> 是否可以在不使用 JavaScript 的情况下防止在小型设备上下载“最多 767”图像？虽然以下CSS将隐藏图像，并且似乎已经在视觉上解决了问题： @media (max-width: 767px) { .responsive-image { display: none; } } 它仍然会下载图像，这是我想避免的。我希望我可以简单地为我想要隐藏的图像提供一个空的 srcset 属性，但随后会加载下一个图像。小提琴：https://jsfiddle.net/n68ousqu/ 我没有足够的声誉点来评论@MiscellaneousUser，但看来，至少在 Chrome 中，您可以从我原来的帖子中获取 HTML 和 CSS，然后只需将 loading="lazy" 添加到 img 元素即可获得这个工作。

Laravel 购物车页面，表单内有一个表单，用于处理删除和提交数据更新数据库

我有一个购物车页面，表格内有一个表格，也许你可以建议我应该做什么？根据图片，我给出的蓝色圆圈是一个表格我的刀片代码我有一个购物车页面，表格内有一个表格，也许你可以建议我应该做什么？根据图片我给出的蓝色圆圈是一个表格我的刀片代码<table class="table"> <thead> <tr> <th scope="col">No</th> <th scope="col">Nama Barang</th> <th scope="col">Quantity</th> <th scope="col">Action</th> </tr> </thead> <tbody> @php $no = 1; @endphp @forelse ($permintaans as $b) <tr> <td>{{ $no ++ }}</td> <td> {{ $b->nama_kategori }} {{ $b->nama_atk }} </td> <td> <form action="{{ route('permintaan.update', $b->id) }}" method="POST" style="display: inline-block;"> @csrf @method('PUT') <div class="input-group input-group-sm mb-3"> <input type="number" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" name="satuan_permintaan" min="0" max={{ $b->stok }} required> <span class="input-group-text" id="inputGroup-sizing-sm">{{ $b->subsatuan_atk }}</span> </div> </td> <td> <form action="{{ route('permintaan.destroy', $b->id) }}" method="POST" style="display: inline-block;"> @csrf @method('DELETE') <button type="submit" class="btn custom2-btn"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="red" class="bi bi-trash" viewBox="0 0 16 16"> <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/> <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/> </svg></button> </form> </td> </tr> @empty @endforelse </tbody> </table> 我的控制器public function store(Request $request) { $task = new Permintaan(); $task->atk_id = $request->input('atk_id'); $task->proses = 'Proses'; if (Permintaan::where('atk_id', $task->atk_id)->exists()){ return redirect('/atk/permintaan')->with(['info' => 'ATK Sudah Dalam Permintaan']); } else{ $task->save(); return redirect()->route('permintaan.index'); } } public function destroy($id) { $permintaan = Permintaan::find($id); $permintaan->delete(); return redirect()->route('permintaan.index'); } 我要处理删除并提交数据更新数据库在开始销毁表单之前关闭更新表单第一个表单标签（缺少）。

如何在React Prime DataTable中添加超链接？

我有一个数据表，我正在使用 React prime 库，我的要求是在一个特定列中添加一个链接。我有一个数据表，我正在使用 React prime 库，我的要求是在一个特定列中添加一个链接。 <DataTable paginator rows={tableRowPage} value={products} tableStyle={{ minWidth: "30rem" }} ><Column key={field} field={field} header={header} style={{ width: "25%" }} /> </DataTable> 我需要特定单元格中的超链接我在数据表中遇到了同样的问题，不幸的是，根据我的研究，他们似乎不提供对此的支持。但是，我已经设法通过这种方式解决了这个问题：数据表添加链接逻辑： <Column field="code" header="Code" body={(rowData) => { return ( <div sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", }} > <div style={{ color: "#3F00FF", textDecoration: "underline", cursor: "pointer", "&:hover": { color: "#23297A", }, }} onClick={() => window.open("www.google.com", "_blank").focus()} > {rowData.code} </div> </div> ); }} ></Column>; 我已经使用 Prime React Column 组件中的 body 渲染了数据。我应用 CSS 将其设置为链接样式，并添加了 onClick 事件以进行重定向。您可以根据您的要求修改逻辑。完整代码链接：https://codesandbox.io/s/primereact-demo-forked-kqtdvs?file=/src/App.jsx 如果您还有任何疑问，请告诉我。

如何在 Abap Simple Transformation 中添加 XML 命名空间

我使用简单转换从内部表中获取 XML。这是输出 XML。我使用简单转换从内部表中获取 XML。这是输出 XML。 <?xml version="1.0" encoding="UTF-8"?> <Complement> <Document Doc="AAA"> <Locations> <Location> <Origin RFC="URE180429TM6"/> <Address Country="SOME_COUNTRY" /> [....] </Location> </Locations> <Products NumTotal="1"> <Product ValorProduct="12164501" /> [....] </Product> </Products> [....].... </Document> </Complement> 但是现在我需要做的是更改一些 XML 元素名称（重命名它们）..这应该使我的 XML 看起来像这样：例如，我需要第一个元素（补语）看起来像 cfdi:Complement （在 cfdi 和补语之间使用冒号 :）...等等等等 <cfdi:Complement> <document:Document Doc="AAA"> <document:Locations> <document:Location> <document:Origin RFC="URE180429TM6"/> <document:Domicilio Country="NIGERIA" /> [....] </document:Location> </document:Locations> <document:Products NumTotal="1"> <document:Product ValorProduct="12164501" /> [....] </document:Product> </document:Products> [....].... </document:Document> </cfdi:Complement> 我一直在尝试直接从简单转换代码更改元素名称，但它不起作用： <?sap.transform simple?> <tt:transform xmlns:tt="http://www.sap.com/transformation-templates" xmlns:ddic="http://www.sap.com/abapxml/types/dictionary" xmlns:def="http://www.sap.com/abapxml/types/defined"> <tt:root name="COMPLEMENT" type="ddic:ZCOMPLEMENT"/> <tt:template> <tt:namespace name="cfdi"/> <tt:namespace name="document"/> <cfdi:Complement> "<----- I get error from this lines <document:Document> "<----- I get error from this lines <tt:attribute name="Doc" value-ref=".COMPLEMENT.DOCUMENT.DOC"/> <document:Locations> <Location> <Origin> <tt:attribute name="RFC" value-ref=".COMPLEMENT.DOCUMENT.LOCATIONS.LOCATION.ORIGIN.RFC"/> [....] </Origin> <Address> <tt:attribute name="Country" value-ref=".COMPLEMENT.DOCUMENT.LOCATIONS.LOCATION.ADDRESS.COUNTRY"/> [....] </Address> </Location> </Locations> <Products> <tt:attribute name="NumTotal" value-ref=".COMPLEMENT.DOCUMENT.PRODUCTS.NUMTOTAL"/> <Product> <tt:attribute name="ValorProduct" value-ref="VALORPRODUCT"/> [....] </Product> </Products> [....].... </Document> </Complement> </tt:template> </tt:transform> 这些是我得到的错误： undeclared namespace prefix 'cfdi' 和 undeclared namespace prefix 'document' 这是简单的转换代码：我只需要更改Element的名称即可。但我不认为这比看起来更难。请帮我解决这个问题。我是这个 Abap 世界的新人。或者任何想法都会对我有很大帮助。问候我之前遇到过一些命名空间问题，也许这个线程有帮助。这是参考代码。正如您所看到的，您必须定义名称空间并按定义方式使用它，此处为 ns1。 <tt:template> <top_element xmlns:ns1="xsd/namespacesForBoxes" xmlns:ns2="xsd/namespacesForCartons" xmlns:ns3="xsd/namespacesForPallets"> <tt:namespace name="ns1"/> <tt:namespace name="ns2"/> <tt:namespace name="ns3"/> <tt:cond s-check="not-initial(ref('.telegram.BOX_ID'))"> <ns1:container> <tt:attribute name="box-id" value-ref=".telegram.BOX_ID"/> </ns1:container> </tt:cond> <tt:cond s-check="not-initial(ref('.telegram.CARTON_ID'))"> <ns2:container> <tt:attribute name="carton-id" value-ref=".telegram.CARTON_ID"/> </ns2:container> </tt:cond> <tt:cond s-check="not-initial(ref('.telegram.PALLET_ID'))"> <ns3:container> <tt:attribute name="pallet-id" value-ref=".telegram.PALLET_ID"/> </ns3:container> </tt:cond> </top_element> </tt:template> 之后应该是这样的： <top_element xmlns:ns1="xsd/namespacesForBoxes" xmlns:ns2="xsd/namespacesForCartons" xmlns:ns3="xsd/namespacesForPallets"> <ns1:container box-id="BOX"/> <ns2:container carton-id="CARTON"/> <ns3:container pallet-id="PALLET"/> </top_element> “tt:cond”只是为了让丢失的 XML 标签或不同顺序的标签不会扰乱你的转换。

如何使用 Bootstrap 5 将嵌入水平居中

我正在尝试使用上面的图像进行集中输入。我按照位置文档进行操作，但不知何故图像没有水平集中：代码：我正在尝试使用上面的图像进行集中输入。我按照位置文档进行操作，但不知何故图像没有水平集中：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Title</title>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <div class="container position-absolute top-50 start-50 translate-middle"> <embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo"> <form action="/streams" method="POST"> <div class="input-group"> <input class="form-control border-danger border-5" type="text" aria-describedby="start-button"> <button class="btn btn-danger" type="submit" id="start-button">Click</button> </div> </form> </div> </body> </html> 我尝试手动执行此操作并使用 display flex，但没有成功。使用text-center链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Title</title>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <div class="container text-center"> <embed class="logo " src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo"> <form action="/streams" method="POST"> <div class="input-group"> <input class="form-control border-danger border-5" type="text" aria-describedby="start-button"> <button class="btn btn-danger" type="submit" id="start-button">Click</button> </div> </form> </div> </body> </html>

从数据库表中选择选择选项后如何显示/隐藏隐藏的 Div？

以下是选择选项的代码：这是选择选项的代码： <div class="modal-body row"> <form role="form" action="patient/addNew" class="clearfix" method="post" enctype="multipart/form-data"> <div class="form-group col-md-6"> <label for="exampleInputEmail1"><?php echo lang('categorie'); ?></label> <select class="form-control m-bot15" name="categorie" value='' id="p_category"> <option value="#"> Sélectionner catégorie</option> <?php foreach ($categories as $category) { ?> <option value="category"><?php if (!empty($setval)) { if ($category->category == set_value('category')) { echo 'selected'; } } if (!empty($patient->category)) { if ($category->category == $patient->category) { echo 'selected'; } } ?> > <?php echo $category->category; ?> </option> <?php } ?> </select> </div> 这是应该显示/隐藏的 Div： <div class="form-group col-md-6" id="divCacher" style="display: none"> <label for="exampleInputEmail1"><?php echo lang('name_husband'); ?></label> <input type="text" class="form-control" name="name_Us" id="nameUs" placeholder=""> <label for="exampleInputEmail1"><?php echo lang('number_pregnancy'); ?></label> <input type="number" class="form-control" name="number_pregnancy" id="nbreEnfants" placeholder=""> </div> 这是 JavaScript 代码： $(document).ready(function () { $('.divCacher').hide(); $(document.body).on('change', '#p_category', function () { var v = $("select.p_category option:selected").val() if (v == 'Fe_Ence') { $('.divCacher').show(); } else { $('.divCacher').hide(); } }); }); 我希望如果我们选择 Fe_Ence 类别，则 div 会显示，否则，它会保持隐藏您需要将 $category 设置为选项值更改此： <option value="category"> 对此： <option value="<?=$category?>"> 以下是适用于更多此类情况的示例：  <select id="p_category"> <option value=""> Sélectionner catégorie</option> <?php foreach ($categories as $category): ?> <option value="<?=$category?>"><?=$category?> <?php endforeach;?> </select>  <div class="cat-container" data-id="test1"> <h1>This is Test1 Category</h1> </div> <div class="cat-container" data-id="Fe_Ence"> <h1>This is Fe_Ence Category</h1> </div> <div class="cat-container" data-id="test3"> <h1>This is test3 Category</h1> </div> // Javascript code checkCategory(); $("#p_category").on('change', checkCategory) function checkCategory() { $('.cat-container').hide() const selected = $('#p_category').val() if (!selected) return; $(`[data-id=${selected}`).show() }

Struts 2 与 Apache Shiro 集成时如何显示结果页面

使用： struts2 2.5.10，春天 4.x, struts2-spring-插件2.5.10，希罗1.4.0， Shiro-Spring 1.4.0。网络.xml：使用： struts2 2.5.10，春季 4.x， struts2-spring-插件2.5.10，四郎1.4.0， shiro-spring 1.4.0. web.xml： <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <display-name>Archetype Created Web Application</display-name> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:beans.xml</param-value> </context-param> <filter> <filter-name>shiroFilter</filter-name> <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class> <init-param> <param-name>targetFilterLifecycle</param-name> <param-value>true</param-value> </init-param> </filter> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter>  <filter-mapping> <filter-name>shiroFilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> <dispatcher>ERROR</dispatcher> </filter-mapping> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app> beanx.xml： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd "> <bean name="loginAction" class="example.shiro.action.LoginAction" > </bean> <bean id="shiroFilter" class="org.apache.shiro.spring.web.ShiroFilterFactoryBean"> <property name="securityManager" ref="securityManager" /> <property name="loginUrl" value="/login.jsp" /> <property name="filterChainDefinitions"> <value> /login.jsp = authc /logout = logout /* = authc </value> </property> </bean> <bean id="iniRealm" class="org.apache.shiro.realm.text.IniRealm"> <property name="resourcePath" value="classpath:shiro.ini" /> </bean> <bean id="securityManager" class="org.apache.shiro.web.mgt.DefaultWebSecurityManager"> <property name="realm" ref="iniRealm" /> </bean> <bean id="lifecycleBeanPostProcessor" class="org.apache.shiro.spring.LifecycleBeanPostProcessor"/> </beans> struts.xml： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <constant name="struts.devMode" value="true" /> <package name="default" extends="struts-default"> <action name="list" class="loginAction" method="list"> <result name="success">/success.jsp</result> <result name="error">error.jsp</result> </action> </package> </struts> index.jsp： <body> <s:action name="list" /> </body> login.jsp 看起来像： <form name="loginform" action="" method="post"> <table align="left" border="0" cellspacing="0" cellpadding="3"> <tr> <td>Username:</td> <td><input type="text" name="username" maxlength="30"></td> </tr> <tr> <td>Password:</td> <td><input type="password" name="password" maxlength="30"></td> </tr> <tr> <td colspan="2" align="left"><input type="checkbox" name="rememberMe"><font size="2">Remember Me</font></td> </tr> <tr> <td colspan="2" align="right"><input type="submit" name="submit" value="Login"></td> </tr> </table> </form> LoginAction.list()： public String list() { Subject currentUser = SecurityUtils.getSubject(); if(currentUser.isAuthenticated()) {System.out.println("user : "+currentUser.getPrincipal()); System.out.println("You are authenticated!"); } else { System.out.println("Hey hacker, hands up!"); } return "success"; } shiro.ini： [users] root=123,admin guest=456,guest frank=789,roleA,roleB # role name=permission1,permission2,..,permissionN [roles] admin=* roleA=lightsaber:* roleB=winnebago:drive:eagle5 index.jsp、login.jsp、success.jsp放在webapp下我想要的是：输入LoginAction.list()需要进行身份验证，如果登录成功，则运行LoginAction.list()并返回"success"然后显示定义为Struts操作结果的success.jsp。现在登录成功后可以执行LoginAction.list()，但是success.jsp不显示，浏览器是空白页面。为什么？我找到了原因：我在index.jsp中使用了<s:action name="list" />，但是struts文档说如果我们想用<s:action>看到结果页面，那么我们必须将其属性executeResult设置为true，即就像<s:action name="list" executeResult="true"/>。在我看来，这有点奇怪，这个属性默认应该是 true。有一个示例，您应该如何使用 Shiro applicationContext.xml 进行配置： <property name="filterChainDefinitions"> <value> # some example chain definitions: /admin/** = authc, roles[admin] /** = authc # more URL-to-FilterChain definitions here </value> </property> 以 /admin/ 开头的 URL 通过角色 admin 进行保护，任何其他 URL 均不受保护。如果 Struts 操作和结果 JSP 不在受保护区域中，则会显示它们。

css：溢出滚动添加额外的填充

我有以下html和css代码： html，正文{ 保证金：0； } #包含...</desc> <question vote="0"> <p>我有以下 html 和 css 代码：</p> <pre><code><!DOCTYPE html> <html> <head> <style type="text/css"> html, body { margin: 0; } #container{ width:100vw; height:100vh; background-color: green; } #left-bar{ position: absolute; width: 300px; height: 100vh; background-color: red; overflow: scroll; } </style> </head> <body> <div id="container"> <div id="left-bar" > </div> </div> </body> </html> </code></pre> <p>它给出： <a href="https://i.sstatic.net/sbXnw.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvc2JYbncucG5n" alt="extra padding overflow scroll"/></a></p> <p>左侧栏内有一个填充，我不明白为什么以及如何删除它。</p> <p>我尝试过的事情：</p> <ul> <li>在左侧栏上添加<pre><code>padding: 0;</code></pre>，它不起作用（也可以使用<pre><code>!important</code></pre>）。</li> <li>使用检查器来了解填充的来源。我没找到。</li> <li>删除左侧栏上的<pre><code>overflow: scroll</code></pre>。它有效，但我希望左栏具有以下行为 <pre><code>overflow: scroll</code></pre></li> </ul> <p><strong>如何删除左栏中的填充？</strong></p> <p><strong>编辑：错误用完全相同的代码消失了。</strong></p> <p>现在使用相同的代码： <a href="https://i.sstatic.net/Ch1IF.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvQ2gxSUYucG5n" alt="no padding"/></a></p> <p>我做了什么：</p> <ul> <li>重启电脑，bug依然存在</li> <li>添加CSS代码来设置滚动条的样式</li> <li>删除我添加的代码 --> bug 消失了</li> </ul> <p>我不明白为什么...</p> </question> <answer tick="false" vote="0"> <p>您看到的是一个空的滚动条。设置溢出<pre><code>overflow: auto</code></pre>。仅当内容溢出时才会显示滚动条。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <style type="text/css"> html, body { margin: 0; } #container{ width:100vw; height:100vh; background-color: green; } #left-bar{ position: absolute; width: 300px; height: 100vh; background-color: red; overflow: auto; } </style> </head> <body> <div id="container"> <div id="left-bar" > </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>您可能会考虑使用一个具有最小滚动条的插件（也许是<a href="https://grsmto.github.io/simplebar/" rel="nofollow noreferrer">simplerbar</a>）。还可以考虑只做 <pre><code>overflow-y:scroll</code></pre> 以获得更容易接受的外观。您还可以更改滚动装订线的颜色<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color" rel="nofollow noreferrer">colors</a></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var el1 = document.querySelector('[data-id=div1]'); var el2 = document.querySelector('[data-id=div2]'); instance1 = new SimpleBar(el1); instance2 = new SimpleBar(el2);</code></pre> <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/5.3.8/simplebar.min.js" integrity="sha512-2SAzoBQi2FbvWkvcsoYW4PH478pUu0gwa7BRA6YQxg6kCWUIOIDfFHMLH57GbWeLa+pkYitOD5j9mIhIt3CLKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/5.3.8/simplebar.min.css" integrity="sha512-uZTwaYYhJLFXaXYm1jdNiH6JZ1wLCTVnarJza7iZ1OKQmvi6prtk85NMvicoSobylP5K4FCdGEc4vk1AYT8b9Q==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div dir="ltr"> <div data-id="div1" style="height: 300px; width: 200px; padding:10px; display: inline-block; border:1px solid gray; background: lightblue; "> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <section data-id="div2" style="height: 300px; width: 200px; padding:10px; display: inline-block; border:1px solid gray"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p> </section> </div></code></pre> </div> </div> <p></p> </answer> </body></html>

AlpineJS 提交表单而不刷新页面

我正在 Magento 上使用 Hyva 主题和 AlpineJs，并使用和所需的输入将产品添加到购物车。这是表单代码的一部分：我正在 Magento 上使用 Hyva 主题和 AlpineJs，并使用 <form> 以及所需的输入将产品添加到购物车。这是表单代码的一部分： <form method="post" id="product_addtocart_form" > <input name="product" /> <input name="selected_configurable_option" /> <input name="related_product" /> <input name="item"> </form> 这是我用来提交表单的按钮： <button type="submit" form="product_addtocart_form"> Submit </button> 一切都很好。但是，我想添加一个模式，该模式在将产品添加到购物车后显示，但一旦添加产品，页面就会刷新。我发现了很多类似的主题，但没有任何对我有用。我已经尝试过使用 event.preventDefault() 和 onsubmit="return false"。两者都不会刷新页面，但不会添加产品。我还尝试使用 HTTP post 方法添加产品，这部分解决了问题，但是当涉及到添加具有可配置选项的产品时，它变得太复杂了。对于我可以采取的在提交表单后停止刷新页面的方法，您有什么建议或想法吗？尝试以下步骤：向表单添加 @submit.prevent 指令以阻止默认的表单提交行为。 ` <form method="post" id="product_addtocart_form" @submit.prevent="submitForm"> <input name="product" x-model="product" /> <input name="selected_configurable_option" x-model="selectedConfigurableOption" /> <input name="related_product" x-model="relatedProduct" /> <input name="item" x-model="item" /> <button type="submit" form="product_addtocart_form"> Submit </button> </form> ` 并且 `<div x-show="showModal" @click.away="showModal = false" style="display: none;"> <div class="modal-content"> Product successfully added to the cart! <button @click="showModal = false">Close</button> </div> </div> ` 使用Fetch API进行AJAX请求，向服务器发出AJAX请求将产品添加到购物车，处理服务器响应并显示如果产品添加成功，则为模态。 `function addToCart() { return { product: '', selectedConfigurableOption: '', relatedProduct: '', item: '', showModal: false, async submitForm() { const formData = new FormData(); formData.append('product', this.product); formData.append('selected_configurable_option', this.selectedConfigurableOption); formData.append('related_product', this.relatedProduct); formData.append('item', this.item); try { const response = await fetch('/path/to/your/add-to-cart/api', { method: 'POST', body: formData, headers: { 'Accept': 'application/json', }, }); if (response.ok) { const data = await response.json(); // Assuming the response contains a success flag or status if (data.success) { this.showModal = true; } else { // Handle error (e.g., show error message) console.error('Error adding product to cart:', data.message); } } else { console.error('Network response was not ok.'); } } catch (error) { console.error('Error:', error); } } }; }` 您可以使用 <div x-data="addToCart()"> 包裹整个模态框并使用 <form> 以便该功能正常工作。

如何以 Svelte 方式设置导出和开槽零件的样式？

Svelte slot 的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。在 html/js 中我可以这样做：身体{颜色：红色;} /* 从外部设置暴露部分的样式 */ ...</desc> <question vote="0"> <p>Svelte <pre><code>slot</code></pre>的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。</p> <p>在 html/js 中我可以做：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} </style> <h1>Hello World</h1> <my-element> <div slot="header"><strong>Header</strong></div> <div slot="body">Body</div> </my-element> <script> customElements.define('my-element', class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> .container { border: solid 1px blue; padding: 5px; position: relative; &:after { content: "my-element"; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part="body"] ::slotted(div) { background-color: lightyellow; } </style> <div class="container"> <header part="header"><slot name="header"></slot></header> <hr> <div part="body"><slot name="body"></slot></div> </div> `; } }); </script></code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色，标有 <pre><code>part="header"</code></pre> 的元素从外部设置为绿色，插入 <pre><code>slot="body"</code></pre> 的内容从内部（shadow dom）设置为绿色有浅黄色背景。</p> <p>我不知道如何在 svelte 中执行任何这种（受控）跨界样式？（例如，当使用 <pre><code>AppShell::part(content)</code></pre> 时，我收到错误：</p> <pre><code>[plugin:vite-plugin-svelte] C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 Expected a valid CSS identifier C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 21 | 22 | <style> 23 | AppShell::part(content) { | ^ </code></pre> </question> <answer tick="false" vote="0"> <p>这里有关于<a href="https://learn.svelte.dev/tutorial/slots" rel="nofollow noreferrer">老虎机的课程</a>。最好参考该工具的文档。 Svelte 的学习网站非常棒。</p> <pre><code>// Slotted component, say Test.svelte. <div class="private-parent"> <slot /> </div> <style> div.private-parent { color: blue; } </style> </code></pre> <p>然后，您使用该组件：</p> <pre><code><script> import Test from './Test.svelte'; </script> <Test>  <p class="outside-style">Hello!</p> </Test> <style> p.outside-style { color: darkred; } </style> </code></pre> </answer> </body></html>

显示输入类型日期的占位符文本

占位符不适用于直接输入类型日期和日期时间本地。占位符不适用于直接输入类型 date 和 datetime-local。 <input type="date" placeholder="Date" /> <input type="datetime-local" placeholder="Date" /> 该字段在桌面上显示 mm/dd/yyy，而在移动设备上则不显示任何内容。如何显示 Date 占位符文本？使用onfocus="(this.type='date')"，例如： <input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/> 使用onfocus和onblur...这是一个例子： <input type="text" placeholder="Birth Date" onfocus="(this.type='date')" onblur="if(this.value==''){this.type='text'}"> 在这里，我尝试了 data 元素中的 input 属性。并使用 CSS 应用所需的占位符 <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> input[type="date"]::before { content: attr(data-placeholder); width: 100%; } /* hide our custom/fake placeholder text when in focus to show the default * 'mm/dd/yyyy' value and when valid to show the users' date of birth value. */ input[type="date"]:focus::before, input[type="date"]:valid::before { display: none } <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> 希望这有帮助 <input type="text" placeholder="*To Date" onfocus="(this.type='date')" onblur="(this.type='text')" > 这段代码对我有用。只需使用这个即可对于 Angular 2，你可以使用这个指令 import {Directive, ElementRef, HostListener} from '@angular/core'; @Directive({ selector: '[appDateClick]' }) export class DateClickDirective { @HostListener('focus') onMouseFocus() { this.el.nativeElement.type = 'date'; setTimeout(()=>{this.el.nativeElement.click()},2); } @HostListener('blur') onMouseBlur() { if(this.el.nativeElement.value == ""){ this.el.nativeElement.type = 'text'; } } constructor(private el:ElementRef) { } } 并像下面一样使用它。 <input appDateClick name="targetDate" placeholder="buton name" type="text"> 对于 React，你可以这样做。 const onDateFocus = (e) => (e.target.type = "datetime-local"); const onDateBlur = (e) => (e.target.type = "text"); . . . <input onFocus={onDateFocus} onBlur={onDateBlur} type="text" placeholder="Event Date" /> 我是这样做的： var dateInputs = document.querySelectorAll('input[type="date"]'); dateInputs.forEach(function(input) { input.addEventListener('change', function() { input.classList.add('no-placeholder') }); }); input[type="date"] { position: relative; } input[type="date"]:not(.has-value):before { position: absolute; left: 10px; top: 30%; color: gray; background: var(--primary-light); content: attr(placeholder); } .no-placeholder:before{ content:''!important; } <input type="date" name="my-date" id="my-date" placeholder="My Date"> 现代浏览器使用 Shadow DOM 来方便输入日期和日期时间。因此，除非浏览器出于某种原因选择回退到 text 输入，否则不会显示占位符文本。您可以使用以下逻辑来适应这两种情况： ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 我使用了 Tailwind CSS 语法，因为它很容易理解。让我们一点一点地分解它： ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } 使用其 Shadow DOM 伪元素选择器隐藏本机选择器图标（通常是日历）。 input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } 选择所有未显示占位符的 date 和 datetime-local 输入，并且：默认使用 placeholder 伪元素显示输入 ::before 文本在小屏幕及以上屏幕上切换为使用 ::after 伪元素 input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 设置 ::before 和 ::after 伪元素的样式。

“限制将街景标记添加到传单地图中的特定区域

我决定通过创建挪威夏季的公路旅行地图来开始学习 Leaflet 和 JavaScript，这是我的项目的可重复示例：我决定通过创建挪威夏季的公路旅行地图来开始学习 Leaflet 和 JavaScript，这是我的项目的可重复示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" /> <script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script> <style> body { margin: 0; } #map { width: 100%; height: 100vh; } .carousel { max-width: 300px; margin: 10px auto; } .carousel img { width: 100%; height: auto; } /* Custom styling for Geiranger popup content */ .geiranger-popup-content { max-width: 500px; padding: 20px; } </style> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([61.9241, 6.7527], 6); var streetViewMarker = null; // Variable to keep track of the Street View marker L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); var roadTripCoordinates = [ [59.9139, 10.7522], // Oslo [62.2622, 10.7654], // Tynset [62.5949, 9.6926], // Oppdal [63.0071, 7.2058], // Atlantic Road [62.1040, 7.2054] // Geiranger ]; // Function to initialize Slick Carousel for a specific marker function initSlickCarousel(markerId, images) { $(`#${markerId}_carousel`).slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, dots: true, arrows: true }); // Add images to the carousel images.forEach(img => { $(`#${markerId}_carousel`).slick('slickAdd', `<div><img src="${img}" alt="Image"></div>`); }); } // Add markers for each destination with additional information and multiple pictures var destinations = [ { coordinates: [59.9139, 10.7522], name: 'Oslo', info: "../07/2023 : Start of the road-trip", images: ['https://www.ecologie.gouv.fr/sites/default/files/styles/standard/public/Oslo%2C%20Norvege_AdobeStock_221885853.jpeg?itok=13d8oQbU', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.2622, 10.7654], name: 'Tynset', info: "../07/2023 : Fly-fishing spot 1", images: ['https://www.czechnymph.com/data/web/gallery/fisheries/norway/glommahein/Kvennan_Fly_Fishing_20.jpg', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.5949, 9.6926], name: 'Oppdal', info: "../07/2023 : Awesome van spot for the night", images: ['https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFRtpLlHWr8j6S2jNStnq6_Z9qBe0jWuFH8Q&usqp=CAU', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [63.0071, 7.2058], name: 'Atlantic Road', info: "../07/2023 : Fjord fishing", images: ['https://images.locationscout.net/2021/04/atlantic-ocean-road-norway.jpg?h=1100&q=83', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.1040, 7.2054], name: 'Geiranger', info: "../07/2023 : Hiking 1", images: ['https://www.fjordtours.com/media/10968/nicola_montaldo-instagram-26th-may-2021-0717-utc.jpeg?anchor=center&mode=crop&width=1120&height=1120&rnd=133209254300000000&slimmage=True', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] } ]; // Use Leaflet Routing Machine with Mapbox Routing plugin to get and display the route L.Routing.control({ waypoints: roadTripCoordinates.map(coord => L.latLng(coord[0], coord[1])), router: L.Routing.mapbox('MAP_BOX_KEY'), draggableWaypoints: false, addWaypoints: false, lineOptions: { styles: [{ color: 'brown', opacity: 0.7, weight: 2 }] } }).addTo(map); // Remove the leaflet-routing-container from the DOM var routingContainer = document.querySelector('.leaflet-routing-container'); if (routingContainer) { routingContainer.parentNode.removeChild(routingContainer); } destinations.forEach(function (destination) { var marker = L.marker(destination.coordinates).addTo(map); var markerId = destination.name.replace(' ', '_'); marker.bindPopup(` <b>${destination.name}</b><br> ${destination.info}<br> <div class="carousel" id="${markerId}_carousel"></div> `).on('popupopen', function () { // Initialize Slick Carousel when the marker popup is opened initSlickCarousel(markerId, destination.images); }).openPopup(); }); // Add Street View panorama on map click map.on('click', function (e) { if (streetViewMarker) { // Remove the existing Street View marker map.removeLayer(streetViewMarker); } let lat = e.latlng.lat.toPrecision(8); let lon = e.latlng.lng.toPrecision(8); streetViewMarker = L.marker([lat, lon]).addTo(map) .bindPopup(`<a href="http://maps.google.com/maps?q=&layer=c&cbll=${lat},${lon}&cbp=11,0,0,0,0" target="blank"><b> Cliquer ici pour avoir un aperçu de la zone ! </b></a>`).openPopup(); }); </script> </body> </html> 一切都按预期进行，我不得不说我对渲染非常满意。然而，通过查看 Stackoverflow 上的不同主题，我发现可以通过单击地图来显示 Google 街景视图。这个功能真的很酷，但我想限制仅在我的公路旅行行程中添加街景标记的选项。有人可以帮我吗？您通过创建挪威夏季公路旅行地图开始了学习 Leaflet 和 JavaScript 的旅程，真是太棒了。到目前为止，您的项目设置看起来不错，我很乐意在您的进展过程中提供指导或帮助。既然您已经包含了 Leaflet、Slick Carousel 和 Leaflet Routing Machine 库，看来您正计划使用 Slick Carousel 创建一个带有路线的交互式地图，也许还有一些附加功能。以下是一些增强您的项目的建议：地图初始化：使用初始视图和要显示的任何特定标记或图层设置您的传单地图。路由功能：利用 Leaflet Routing Machine 将动态路线添加到您的地图。您可以自定义路线、添加航点并提供逐向指示。照片轮播：既然您提到了公路旅行地图，请考虑集成 Slick Carousel 来展示旅途中关键地点的照片或描述。这可以为您的地图添加视觉上吸引人的元素。地图控制：探索 Leaflet 插件或内置控件以增强用户体验。例如，您可以添加缩放控件或比例尺。响应式设计：确保您的地图能够响应不同的设备。 Leaflet 通常适合移动设备，但如果需要的话进行测试和调整是一个很好的做法。数据层：如果您有与您的公路旅行相关的特定数据点或事件，您可以使用标记或其他视觉元素在地图上表示它们。 JavaScript 交互性：使用 JavaScript 为地图添加交互性。对于 ㅤ 实例，当用户单击标记时，您可以创建包含附加信息的弹出窗口。记得迭代测试你的项目，并参考每个库的文档以获取详细的使用说明。如果您有具体问题或在此过程中遇到挑战，请随时提问。祝您的公路旅行地图项目好运！

带有边框半径和粘性标题的 HTML 表格

我有一个 HTML ，带有边框半径和使用位置的粘性标题：sticky，如下所示： https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是，当使用滚动时我有一个带有 <table> 的 HTML border-radius 和使用 position: sticky 的粘性标题，如下所示： https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是，当使用粘性标题滚动时，表格行会伸出粘性标题的圆角所在的位置。请参阅此图片的左上角：有没有办法可以在使用粘性标题向下滚动时保持圆角，或者在标题变得粘性并从原始位置向下移动时删除粘性标题？理想情况下，我想要一个CSS解决方案。您可以使用伪元素隐藏边框的某些部分： table thead th:first-child::before, table thead th:last-child::after { width: 1px; height: 5px; background: white; content: ""; display: block; position: absolute; top: 0px; } table thead th:first-child::before { left: -1px; } table thead th:last-child::after { right: -1px; } 正如Ivan建议的那样，似乎使用伪元素来覆盖标题下方不需要的边框是（令人惊讶的）唯一可行的选择。我建议使用伪不仅用于覆盖“外部”区域，而且还用于绘制弧线和填充“内部”区域。可以使用堆叠背景来做到这一点。应用于原始代码： /* § Additions / Changes */ table thead th { position: relative; } /* Pseudos exceeding header boundary by border width; with rectangle covering half circle and rest of height */ table thead th:last-child::after, table thead th:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--global-border-width-1)); width: var(--global-border-radius); background-image: linear-gradient(to bottom, transparent var(--global-border-radius), var(--global-title-color) 0), radial-gradient(circle at var(--global-border-radius) var(--global-border-radius), var(--global-title-color) var(--global-border-radius), var(--global-content-background-color) 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); background-repeat: no-repeat; } table thead th:last-child::after { left: auto; right: calc(-1 * var(--global-border-width-1)); background-position: top right; } /* § Declarations and original style */ html { --global-content-background-color: white; --global-title-color: black; --global-background-color: lightblue; --global-border-color: black; --global-border-radius: 20px; --global-border-width-1: 10px; --global-space-fixed-2: 10px; --global-space-fixed-3: 15px; --global-border-diameter: calc(2 * var(--global-border-radius)); background-color: var(--global-content-background-color); } table { color: var(--global-title-color); background-color: var(--global-content-background-color); border-collapse: separate; border-color: var(--global-title-color); border-style: solid; border-radius: var(--global-border-radius); border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1); border-spacing: 0; width: 100%; } table thead { position: sticky; top: 0; z-index: 10; } table thead th { color: var(--global-background-color); background-color: var(--global-title-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: bottom; } table tbody td { border-top: var(--global-border-width-1) solid var(--global-border-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: top; } table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--global-border-radius); } table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--global-border-radius); } /* § Unrelated / demo */ * { scroll-margin-top: calc(var(--global-space-fixed-2) * 4 + 1rem); /* = height of sticky thead + top padding of cell, provided text in thead does not wrap */ scroll-margin-bottom: 1em; } td { height: 60vh; } td a { float: right } tr:last-child td { vertical-align: bottom; } a[name]:empty::before { content: attr(name); } th:not(#\0):hover::before { background-image: linear-gradient(to bottom, transparent var(--global-border-radius), #0F08 0), radial-gradient(circle at center, #00F8 var(--global-border-radius), #F2F4 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); } <table> <thead> <tr> <th>Fake non-transparent "border-radius"</th> </tr> </thead> <tbody> <tr> <td> <a href="#⬆️" name="⬇️"></a> For fixed header</td> </tr> <tr> <td> <a href="#⬇️" name="⬆️"></a> Using CSS stacked background images in pseudo elements</td> </tr> </tbody> </table> 只需从表格中删除边框，并为表格主体中的第一个和最后一个表格单元格添加左右边框： tbody td:first-child { border-left: 1px solid black; } tbody td:last-child { border-right: 1px solid black; } tbody tr:last-child td{ border-bottom: 1px solid black; } tbody tr:last-child td:first-child { border-bottom-left-radius: 2px; } tbody tr:last-child td:last-child { border-bottom-right-radius: 2px; } 当然是使用适当的缩进、嵌套和变量！使用许多伪选择器看起来样式相当丑陋，但似乎可以解决您的问题。有一个更紧凑的解决方案。只需将具有背景颜色的框阴影添加到第一个 < th > 和最后一个 < th > 即可隐藏元素。在此示例中，在右侧，您可以看到表格行由于边框半径而可见。在左边，我应用了盒子阴影。盒子阴影：0 -2.1rem 0 .6rem #E5E7EB；在这里，它是灰色的，以便您可以看到它的工作原理，但您只需使用与背景相同的颜色即可使其完全不可见。这是最终结果以及我正在使用的代码： th:第一个孩子 { 边界半径：0.75rem 0 0 0；左边框：.1rem 实心 $color-gray-200；框阴影：0 -2.1rem 0 .6rem $color-gray-200； } th：最后一个孩子{ 边界半径：0 0.75rem 0 0；右边框：.1rem 实心 $color-gray-200；盒子阴影：1rem -2.1rem 0 .6rem $颜色白色； } 可能需要调整框阴影以隐藏基于所选边框半径的行。不确定你是否熟悉jquery，如果熟悉的话你可以在滚动内容时动态更改 border-top-left-radius: 等于粘性标题的半径，但这对于新手来说有点棘手jquery/JS。其次，您可以将粘性标题封闭到父级（例如class="parent")），并将父级背景设置为白色，没有边框。并保持粘性标题的边框半径不变。因此，当您滚动内容时将位于该父级下方（例如 class="parent"）。为了确保父级出现在该行上方，您可以给出 z-index: 10

用 Bootsrap 制作的网站右侧的空间不会消失吗？

无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact | Enba Camping</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="style/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>  <div class="container-fluid"> <div class="row"> <div class="col-sm-12 p-0"> <nav class="navbar navbar-expand-lg bg-body-tertiary p-0 "> <div class="container-fluid bg-dark "> <a class="navbar-brand text-light mb-2" href="index.html">Enba Camping</a> <button class="navbar-toggler btn btn-light btn btn-outline-light bg-light m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link text-light text-center" aria-current="page" href="index.html">Home</a> <a class="nav-link text-light text-center" href="aboutus.html">About us</a> <a class="nav-link active text-light text-center" href="contact.html" aria-disabled="true">Contact</a> </div> </div> </div> </nav> </div> </div> </div>   <div class="container-fluid p-0 bg-dark text-light"> <div class="row"> <div class="col-sm-6 ps-0"> <img src="images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg" alt="" class=" d-block w-100 c-img "> </div> <div class="col-sm-6 d-flex justify-content-center align-items-center "> <div class="text-center"> <h2 class="fw-bold display-4 ">Bize Ulaşın</h2>  <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Adınız</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Name"> </div> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email Adres</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email Address"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Mesajınız</label> <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message" rows="3"></textarea> </div> <div class=" gap-2 d-md-block "> <button class="btn btn-light " type="button">Send</button> </div> </div> </div> </div> </div>   <div class="container mt-sm-5"> <div class="row text-center "> <h1 class="d-flex justify-content-center">Mekanlarımız</h1> <hr> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Karavan Parkı</h5> <p class="card-text">Ormanın içinde konumlanan karavan parkımız, tam anlamıyla bir doğa kaçamağı sunuyor. Ormanın huzurlu atmosferinde kendinizi kaybedin. Karavanınızla konforlu bir konaklama deneyimi yaşayın.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız </a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card3.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Çadırlı Kamp</h5> <p class="card-text">Orman içi çadırlı kamp alanımız, doğa severler için bir cennet. Gölgeli ağaçlar arasında konumlanan çadırlarımızda, kuş cıvıltıları ve huzur içinde bir konaklama deneyimi sizi bekliyor.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card1.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dağ Evi </h5> <p class="card-text">Dağ evimiz, şehrin gürültüsünden uzak,huzurlu bir konaklama imkanı sunuyor. Ferah odalarımızda dağ manzarasının keyfini çıkarabilir, gölet kenarındaki aktivitelerle vakit geçirebilirsiniz.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> </div> </div>   <div class="row my-4"> <div class="col-sm-12"> <h1 class="d-flex justify-content-center">Galeri</h1> <hr> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/hichem-meghachou-7I-Rj_E9ihI-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/jimmy-conover-J_XuXX9m0KM-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/josh-campbell-UbbjVyibFuc-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/shelby-cohron-ESNV6KmLJMg-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/tegan-mierle-fDostElVhN8-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/toa-heftiba-x9I-6yoXrXE-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> </div>   <div class="bg-dark text-light"> <div class="container"> <footer class="pt-5 mt-5 "> <div class="row "> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column "> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-md-5 offset-md-1 mb-3"> <form> <h4> Abone Ol ve Doğanın Güzelliklerini Kaçırma!</h4> <p class="fs-6">Doğanın kucaklayıcı atmosferine adım atmak, huzurla dolu anlar yaşamak ve Enba Camping'in sunduğu özel fırsatları kaçırmamak için hemen abone ol! Sitemize abone olarak, doğanın gizemli güzellikleri, özel indirimler ve etkinliklerden ilk sen haberdar olacaksın.</p> <p class="fs-6"> Unutulmaz anılar biriktirmek ve doğanın kollarında huzurlu bir deneyim yaşamak için abone ol, Enba Camping'in eşsiz dünyasına adımını at! 🏕️✨ </p> <div class="d-flex flex-column flex-sm-row w-100 gap-2"> <label for="newsletter1" class="visually-hidden">Email address</label> <input id="newsletter1" type="text" class="form-control" placeholder="Email address"> <button class="btn btn-primary" type="button">Subscribe</button> </div> </form> </div> </div> <div class="d-flex flex-column flex-sm-row justify-content-between border-top"> <p>© 2023 Company, Inc. All rights reserved.</p> <ul class="list-unstyled d-flex"> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#twitter"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#instagram"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#facebook"></use> </svg></a></li> </ul> </div> </footer> </div> </div>  </body> </html> 和CSS .jumb { vertical-align: inherit; } p { font-size: 24px; } .c-item { height: 480px; } .c-img { height: 100%; object-fit: cover; filter:brightness(0.9) } 这里。我不希望页面左右移动。我想让它适合全屏，但容器结构溢出了请将这段代码添加到您的 CSS 文件中。然后，它就会起作用。 .row{ margin-right: 0px; }

display-templates 相关问题

最新问题