html 相关问题

有 2 个等效的组件模板，其中一个是用 AngularJS 编写的：有 2 个等效的组件模板，其中一个是用 AngularJS 编写的： <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1" ng-bind="status.message"></span> </span> 新的一个是用现代 Angular 编写的： <span *ngFor="let status of statusList" class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" [ngClass]="appealStatusAdditionalInformationTypesMap[status.informationType].iconClass" ></span> <span class="soh__content soh__content_multiline app-text_addition-1">{{ status.message }}</span> </span> 两者之间的区别在于，在AngularJS中似乎主跨度更大，导致有差距：而在现代 Angular 中，相同的跨度较小，导致图标之间没有间隙：生成的html如下（旧的有间隙）： <appeal-status-information status-information="rowData.appealStatusAdditionalInformation" applicant-type="rowData.applicantInfo.applicantType" class="ng-isolate-scope">  <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover ng-scope"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_prime gis-icon gis-icon-main-response" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1 ng-binding" ng-bind="status.message">Response received</span> </span>  <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover ng-scope"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_action mdi mdi-20px mdi-thumb-up-outline" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1 ng-binding" ng-bind="status.message">Appeal status: Information received</span> </span>  </appeal-status-information> 新的没有： <appeal-status-information> <span class="show-on-hover ng-star-inserted"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_prime gis-icon gis-icon-main-response"></span> <span class="soh__content soh__content_multiline app-text_addition-1">Response received</span> </span> <span class="show-on-hover ng-star-inserted"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_action mdi mdi-20px mdi-thumb-up-outline"></span> <span class="soh__content soh__content_multiline app-text_addition-1">Appeal status: Information received</span> </span>  </appeal-status-information> 如您所见，样式相同，但结果却不同。旧角度的跨度较大可能是什么原因？ <ng-container *ngFor="let status of statusList"> <span class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" [ngClass]="appealStatusAdditionalInformationTypesMap[status.informationType].iconClass" ></span> <span class="soh__content soh__content_multiline app-text_addition-1">{{ status.message }}</span> </span> </ng-container> 对 ng 使用 ng-container，这样在查看页面时不会使用 html 中的任何空间或高度宽度

javascript html angular angularjs

回答 1 投票 0

为什么溢出滚动在大屏幕上不起作用？

我正在开发一个 Vue 项目，我有这个 HTML：我正在开发一个 Vue 项目，我有这个 HTML： <div class="flex flex-col md:flex-row"> <div class="m-6 ml-10 mr-5 mt-10"> <div class="text-left"> <input type="text" class="mb-6 h-10 w-full rounded-lg border-2 border-gray-300 p-2" placeholder="Search for workouts, profiles, etc." /> </div> <div class=" "> <div class="mb-3 text-left"> <p>Explore workouts</p> </div> <div class="flex h-28 flex-row gap-3 overflow-x-auto whitespace-nowrap"> <div class="box inline-flex min-w-52 bg-black"></div> <div class="box inline-block min-w-52 bg-black"></div> <div class="box min-w-52 bg-black"></div> <div class="box min-w-52 bg-black"></div> <div class="box min-w-52 bg-black"></div> <div class="box min-w-52 bg-black"></div> <div class="box mb-5 min-w-52 bg-black"></div> </div> </div> </div> </div> 我为此使用顺风。问题是我的 overflow-x-auto 在大屏幕尺寸上不起作用，但当我最小化屏幕时它可以工作。在大屏幕上，它滚动到一个空白区域。将在下面添加一张照片，说明它在大屏幕和小屏幕上的样子。我尝试使用相对定位，但没有成功。大屏幕上：小屏幕上：更换你的div： <div class="flex flex-col md:flex-row"> 这样： <div class="flex flex-col"> 现在似乎正在按预期工作。 https://play.tailwindcss.com

html css frontend tailwind-css overflow

回答 1 投票 0

ios 肖像照片在上传时会翻转为风景

我们有一个用 React 开发的 B2B 市场平台。用户可以提交待售车辆。我们在处理从 IOS 拍摄的肖像照片时遇到问题。实际上，当用户从他的画廊拍摄照片或

javascript html ios reactjs file-upload

回答 1 投票 0

Web 组件继承父样式，即使使用 all: 初始设置

MVCE 您可以执行以下代码片段： const a = document.createElement("div"); // 在左上角显示大红色矩形 a.style.position = "绝对"; a.style.left = "10px"; a.style.top = "1...

javascript html web-component

回答 2 投票 0

屏幕阅读器无法正确读取价格（“$47.49”）

我试图让屏幕阅读器 (NVDA) 将我的货币价值（美元）47.49 美元读取为“47 美元 49 美分”，但屏幕阅读器将我的货币价值读取为“4749 美元”。我试图让屏幕阅读器 (NVDA) 将我的货币价值（美元）47.49 美元读取为“47 美元 49 美分”，但屏幕阅读器将我的货币价值读取为“4749 美元”。 <div class="perVendorCarDetails"> <span class="carCurrencySymbol">$</span> <span class="carPriceDollar">38</span> <span class="carPriceDot">.</span> <span class="carPriceCents">57</span> </div> 您的示例被 NVDA/Firefox 称为“美元三十八点五十七”。这不好。如果您只是将其编码为<p>$38.57</p>，它将被读作“美元三十八点五七”。尽管这看起来/确实令人不快，但这正是 NVDA 用户所期望的。例如，如果我去亚马逊，我会以 1.29 美元的价格获得“一分二九”。 Target 经历了一场广为人知的无障碍诉讼，聘请了一家无障碍咨询公司，建立了一个无障碍团队，并使用屏幕阅读器进行了广泛的测试，宣布 39.99 美元为“三十九点九九美元” 因此，您可能想做的最重要的事情是不要在 NVDA 用户想要花钱时让他们感到困惑。以与他们预期不同的方式呈现美元价值可以做到这一点。但是，如果您坚持这种情况必须发生，您可以使用 aria-hidden 从 NVDA 隐藏您不喜欢的值，然后您可以将您想要的短语写到其后面的页面中，将其隐藏所有其他用户通过离屏CSS技术旨在做到这一点。您的新 HTML： <p aria-hidden="true"> $38.57 </p> <span>38 dollars and 57 cents</span> 显然，您需要将美元金额分解为两个变量并分别写入两次。 aria-hidden="true" 对屏幕阅读器隐藏了 <p> 文本，因此屏幕阅读器只会阅读 <span> 中的内容。现在使用 CSS 对用户隐藏 <span> 的内容： p[aria-hidden=true] + span { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } 您显然需要根据您的元素、ID、类等更改选择器。您可以使用 aria-label 属性。 <span aria-label="47 dollars and 49 cents">$47.49</span> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

html accessibility screen-readers

回答 2 投票 0

如何在CSS中给出背景图像路径？

我的 CSS 文件位于：项目/Web/Support/Styles/file.css 我的图片位于：项目/Web/images/image.png 我想要在我的 CSS 文件中使用此图像。我努力了： 1) 背景图片: url(/images/image.png);...

html css

回答 6 投票 0

jquery mobile 中下拉选项默认显示问题

我不希望下拉默认选择的选项单独显示，但为什么会发生这种情况。是否有一个选项可以跳过特定下拉列表的 jquery 设置？就像使用某些功能一样...

html jquery dom jquery-ui jquery-mobile

回答 1 投票 0

CSS 网格模板 rowStart 和 rowEnd 行为

我正在使用 TailwindCSS 来制作一些基于网格的布局。我有一个有 100 行和 100 列的网格（扩展了默认的顺风配置）从Tailwind Play中可以看到，最后一个网格的h...

html css tailwind-css css-grid

回答 1 投票 0

如何使 div 位于水平对齐（居中）元素的右侧。在 Tailwind 或 CSS 中

如何使其准确：- 上面有一个 div 在中心对齐，然后另一个 div 在它旁边。 div 的宽度随着动画和按钮的变化而变化。 <question vote="1"> <p>如何使其准确：- <a href="https://i.sstatic.net/Jf1l6Ew2.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvSmYxbDZFdzIucG5n" alt="enter image description here"/></a></p> <p>在上面有一个div在中心对齐，然后另一个div在它旁边。 div 的宽度随着动画和按钮的变化而变化。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code><script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="flex justify-center">  <div class=" bg-blue-300 grow"></div>  <div class="py-10 bg-yellow-300">Center Me</div>  <div class=" bg-blue-300 grow"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>在 <pre><code>absolute</code></pre> 容器内使用 <pre><code>relative</code></pre> 的最佳方式是使用它，因为您有将元素推入其中的内容，或者您可以使用网格代替 <pre><code>flex</code></pre> 来按内容</p> <p>使用flex的解决方案： </p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code> <script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="flex justify-between relative">  <div class="bg-blue-300 grow"></div>  <div class="py-10 bg-yellow-300">Center Me</div> <div class="bg-blue-300 grow"></div>  <div class="bg-blue-300 absolute right-0 h-full"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> <p>使用网格</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code> <script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="grid grid-cols-3">  <div class="bg-blue-300"></div>  <div class="py-10 bg-yellow-300">Center Me</div>  <div class="bg-blue-300"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> <p>最终取决于你如何处理这个问题</p> </answer> </body></html>

html css sass flexbox tailwind-css

回答 0 投票 0

ion-searchbar 与 FormGroup 仅在插入的值为 minLength (3) 时进行搜索

我正在尝试制作一个在插入的值大于或等于3之前不进行搜索的但我尝试的方法不起作用 :( 主页.html 我正在尝试制作一个在插入的值大于或等于 3 之前不进行搜索的但是我尝试的方法没有成功 :( 首页.page.html <form [formGroup]="search"> <ion-searchbar formControlName="ionSearch" [debounce]="500" (ionInput)="handleInput($event)" placeholder="Search product"></ion-searchbar> </form> 首页.page.ts ngOnInit() { this.makeForm(); } makeForm() { this.search = new FormGroup({ ionSearch: new FormControl("", Validators.minLength(3)) }); } 你的意思是这样吗？我只是检查长度是否大于或等于三并执行过滤！ handleInput(event) { const query = event.target.value.toLowerCase(); if (query.length >= 3) { this.results = this.data.filter( (d) => d.toLowerCase().indexOf(query) > -1 ); } else { this.results = this.data; } } Stackblitz 演示

html angular typescript ionic-framework formgroups

回答 1 投票 0

SetClipboardData无法写入任何数据

我试图将 HTML 作为富文本写入剪贴板，但它不起作用。我做错了什么？我尝试单独运行 html_to_clipboard，但剪贴板是空的。 SetClipboardData 没有

python html clipboard pywin32 rtf

回答 1 投票 0

VSC 中 HTML/CSS 代码中的默认空格

在此 HTML 元素中：“Visual Studio Code 在 : 和 l 之间插入默认的空格。如何更改默认设置，以便它不在冒号后插入此空白，而是插入默认空白

html css whitespace

回答 1 投票 0

html 相关问题

最新问题