关于【html】的问题- 第1页

finefoot

Asked: 2025-03-10 03:49:07 +0800 CST

即使字体大小和行高都设置为相同的固定像素值，行高仍然取决于字体系列

5

<style>
div {
font-size: 16px;
line-height: 16px;
display: inline-block;
width: 40%;
background: gray;
vertical-align: top;
}
</style>
<div style="font-family: monospace;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div style="font-family: sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

和font-size都line-height设置为16px。但线条的实际高度仍然取决于是font-family还是monospace。sans-serif我还需要设置什么才能获得统一的行高？

kshetline

Asked: 2025-03-09 23:38:07 +0800 CST

如何处理独立指令中的 CommonModule 引用？

6

我正在尝试将旧的 Angular 组件库迁移为独立组件。

许多组件有很多共同点，因此我使用超类来表示所有常见行为。至少按照我的习惯， a 的超类@Component不应该是另一个@Component，而应该是@Directive。

超类的开始如下所示：

// @dynamic
@Directive()
export abstract class DigitSequenceEditorDirective<T> implements
    AfterViewInit, ControlValueAccessor, OnInit, OnDestroy, Validator {
// ...

其中一个子类组件的开头如下：

// @dynamic
@Component({
  selector: 'tbw-time-editor',
  animations: [BACKGROUND_ANIMATIONS],
  templateUrl: '../digit-sequence-editor/digit-sequence-editor.directive.html',
  styleUrls: ['../digit-sequence-editor/digit-sequence-editor.directive.scss', './time-editor.component.scss'],
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeEditorComponent), multi: true },
              { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimeEditorComponent), multi: true }]
})
export class TimeEditorComponent extends DigitSequenceEditorDirective<number> implements OnInit {
// ...

现在的问题是，将其移植到 Angular 19 并尝试使用独立设计，指令的 HTML 包含一些 CommonModule 功能，如[ngClass]和[ngStyle]。（也有和之类的用法，但我可以使用、等*ngIf摆脱它们。）@if@for

Google AI 对在指令中使用功能的非功能性建议CommonModule如下：

import { Directive, Input } from '@angular/core';
    import { NgIf } from '@angular/common';
    
    @Directive({
      selector: '[appMyStandalone]',
      standalone: true,
      imports: [NgIf] // Can't be done! No `imports` field! (I'd have NgClass and NgStyle here if this worked)
    })
    export class MyStandaloneDirective {
      @Input() appMyStandalone: boolean = false;
    }

如果我不能使用imports指令，我该如何解决下面的红色波浪线问题？

lm.

Asked: 2025-03-08 03:34:57 +0800 CST

html 中的两列文本未正确对齐

5

我正在尝试格式化 html，使文本按 2 列格式化。我尝试按如下方式进行操作：

.content {
    column-count: 2;
    column-gap: 10px; /* Space between the columns */
}
body {
  counter-reset: section;      
}
p:before {
  counter-increment: section;        
  content: "" counter(section) ": "; 
}

<div class="content"> 
  <p>this is the first paragraph of text.</p>
  <p>this is the second paragraph of text.</p>
  <p>this is the third paragraph of text.</p>
  <p>this is the fourth paragraph of text.</p>
  <p>this is the fifth paragraph of text.</p>
  <p>this is the sixth paragraph of text.</p>
</div>

但是当我在浏览器中打开此文件时，我看到文本被分成 2 列，但 2 列之间的行未垂直对齐（如屏幕截图所示）：。我需要做的是 - 示例页面上的第 1 行和第 4 行的高度相同。尝试使用 flex，但它导致文本被分成 2 列以上。样式中缺少什么？提前致谢

Sarah Z

Asked: 2025-03-07 08:03:32 +0800 CST

我该如何以下拉方式平滑地为下拉列表中的元素制作动画（仅在 CSS 中）？

7

（我对 HTML 和 CSS 还不太熟悉，所以请耐心听我说）我一直在尝试自定义这个网站，让它看起来更美观。我想做的一件事是自定义“浏览”和“提交”下的下拉菜单，这样当你将鼠标悬停在它们上面时，它们会平滑地向下延伸，就像一个向下滑动的效果。我想同时为下拉菜单本身和里面的文本制作动画。

我正在查看的 HTML 片段是这样的：

.dropdown-toggle {
  min-height: fit-content;
  min-width: fit-content;
  max-height: fit-content;
  max-width: fit-content;
}

.dropdown-menu {
  block-size: fit-content;
  width: 100px;
  height: 200px;
  transition: height 1s;
  overflow: hidden;
}

.dropdown-menu:hover {
  height: 300px;
  block-size: fit-content;
  overflow: hidden;
}

.nav-item dropdown {
  width: 100px;
  height: 100px;
  transition: height 2s;
  block-size: fit-content;
  overflow: hidden;
}

.nav-item dropdown:hover {
  height: 300px;
  block-size: fit-content;
  overflow: hidden;
}

.nav-link dropdown-toggle {
  width: 100px;
  height: 100px;
  transition: height 1s;
  overflow: hidden;
}

.nav-link dropdown-toggle:hover {
  height: 300px;
}


.dropdown-item {
  width: 30px;
  height: 30px;
  transition: height 1s;
  position: sticky;
}

.dropdown-item:hover {
  height: 50px;
}

.dropdown-menu show {
  min-height: 0px;
  min-width: 0px;
  max-height: 300px;
  max-width: 300px;
}

.dropdown-menu show:hover {
  height: 50px;
}

<!-- Left Nav Section -->
<ul class="navbar-nav mr-auto navbar-left">
  <li class="nav-item">
    <a class="nav-link" href="https://toyhou.se/DeclineOfMySanity">
      <span class="fa fa-home"></span> Profile 
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="https://toyhou.se/~forums">
     <span class="fa fa-comments"></span> Forums 
    </a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownBrowse" >
      <span class="fa fa-fw fa-search"></span> 
      Browse 
    </a>
    <div class="dropdown-menu" id="dropdownBrowse">
      <h6 class="dropdown-header">Characters</h6>
      <a class="dropdown-item" href="https://toyhou.se/~browse/popular"><i class="fa fa-fire fa-fw mr-1"></i> Popular </a>
      <a class="dropdown-item" href="https://toyhou.se/~browse/feed"><i class="fa fa-binoculars fa-fw mr-1"></i> Feed </a>
      <a class="dropdown-item" href="https://toyhou.se/~browse/recent"><i class="fa fa-fw fa-clock mr-1"></i> Recent </a>
      <a class="dropdown-item" href="https://toyhou.se/~browse/search"><i class="fa fa-fw fa-search mr-1"></i> Search </a>
      <h6 class="dropdown-header">Browse</h6>
      <a class="dropdown-item" href="https://toyhou.se/~library/popular"><i class="fa fa-fw fa-book mr-1"></i> Literatures </a>
      <a class="dropdown-item" href="https://toyhou.se/~worlds"><i class="fa fa-fw fa-globe mr-1"></i> Worlds </a>
    </div>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownCreate" > <span class="fa fa-fw fa-plus"></span> Submit </a>
    <div class="dropdown-menu" id="dropdownCreate">
      <a class="dropdown-item" href="https://toyhou.se/~characters/create"><i class="fa fa-fw fa-user mr-1"></i> Character </a>
      <a class="dropdown-item" href="https://toyhou.se/~bulletins/create"><i class="fa fa-fw fa-newspaper mr-1"></i> Bulletin </a>
      <a class="dropdown-item" href="https://toyhou.se/~images/upload"><i class="fa fa-fw fa-image mr-1"></i> Image </a>
      <a class="dropdown-item" href="https://toyhou.se/~images/multi-upload"><i class="fa fa-fw fa-image mr-1"></i> Multi-Images </a>
      <a class="dropdown-item" href="https://toyhou.se/~literatures/create"><i class="fa fa-fw fa-book mr-1"></i> Literature </a>
      <a class="dropdown-item" href="https://toyhou.se/~worlds/create"><i class="fa fa-fw fa-globe mr-1"></i> World </a>
    </div>
  </li>
</ul>

我已经自己尝试了一些方法，并且到目前为止已经将其应用到我的 CSS 中：

老实说，这些只是让它移动的一系列尝试。我看到的问题包括下拉菜单仅在悬停在框本身上时才会扩展，而不是在“提交”按钮上扩展，文本后面的块在悬停时立即显示，而不是从无到有滑出，并且无法使文本后面的块自行扩展；无论我做什么，它都会弹出。

说实话我真的很困惑所以如果能提供任何帮助我将非常感激！

user29587692

Asked: 2025-03-07 04:23:11 +0800 CST

如何才能使一个 SVG 路径/填充仅绘制在另一个复杂的 SVG 路径“内部”？

5

我在 SVG 中有一个瓶子形状，里面有一个装饰性的漩涡和一些穿过内部的其他线条，因此我不确定什么算作路径的“内部”和“外部”。我想在瓶子“内部”放置一个波浪形状，但我没有得到任何积极的实验结果<clipPath>，我不确定瓶子内部的线条是否对我不利。

我现在拥有的波浪形状位于瓶子顶部：

  * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }

<div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="bottle" d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842 M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="130px"
     viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve">
         <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
</svg>
</div>

用标签围住瓶子路径<clipPath>只会导致单独出现波浪形状：

  * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }

<div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
    <clipPath>
    <path id="bottle" d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842 M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
    </clipPath>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="130px"
     viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve">
         <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
</svg>
</div>

围绕波浪路径<clipPath>只显示瓶子：

  * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }

<div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="bottle" d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842 M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="130px"
     viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve">
         <clipPath>
         <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
         </clipPath>
    </svg>
</svg>
</div>

这是在浏览器 SVG 编辑器中加载的瓶子路径：https://yqnn.github.io/svg-path-editor/#P=M89.6174_72.5661C78.3761_70.8794_34.9222_93.2227_19_135.503M89.6174_72.5661V2H125M89.6174_72.5661H125M19_135.503C-0.90 2714_188.355_-0.0185633_201.762_9.29124_288.909C17.1881_362.829_33.8318_424.189_ 44.8889_432.248C60.9111_443.925_84_454.607_125_454.607M19_135.503C130.2_168.307_1 55_202.255_125_251.842M160.383_72.5661C171.624_70.8794_215.078_93.2227_231_135.503M160.383_72.5661V2H125M160.383_72.5661H125M231_135.503C250.903_188.355_250.019 _201.762_240.709_288.909C232.812_362.829_216.168_424.189_205.111_432.248C189.089 _443.925_166_454.607_125_454.607M231_135.503C119.8_168.307_95_202.255_125_251.842

DXB-DEV

Asked: 2025-03-07 00:54:55 +0800 CST

如何从特定点开始播放视频并在特定点停止（以秒为单位）并循环播放而无需用户交互？

6

我想从特定点（60 秒）开始播放视频（mp4），在特定点（100 秒）停止，并且循环播放而无需用户交互。

<video autoplay muted loop>
<source src="../images/myvideo.mp4#t=60,100" type="video/mp4">
</video>

有人能建议一个办法吗？

Sina

Asked: 2025-03-06 20:30:33 +0800 CST

godot web export 不支持其他语言的文本

5

我正在用 Godot 游戏引擎为网页平台开发一款游戏。问题是当我想为网页输出时，只有英文文本显示正确，其余语言无法正确显示。示例如图所示：

而其他输出如 Android 或 Windows 则不存在这样的问题。有人知道问题出在哪里吗？

stanley

Asked: 2025-03-06 19:55:53 +0800 CST

如何创建仅使用 CSS 背景图像且无文本的可访问空 <a> 标签

5

如何创建仅具有 CSS 背景图像的可访问空标签，例如用于社交媒体链接。

因此唯一的 HTML 标签是：

<a class="social-link" href="https://mastodon.social"></a>

CSS 如下：

.social-link{
  height:48px;
  width:48px;
  background-image: url("mastodon.png");
}

这里有类似的堆栈溢出问题，但它没有为这个问题提供具体的语法：HTML 可访问性，允许使用空元素吗？

Wouter Vandenputte

Asked: 2025-03-06 18:47:03 +0800 CST

表格单元格中的文本溢出后，Angular/HTML 添加按钮

6

我有一张表格，有些单元格溢出了。这些单元<td>格有一个类，在末尾有一个省略号。但是有没有办法在省略号后面添加一个小按钮/跨度/其他东西？

<td #elCol ...>
  <ng-container *ngIf="overflows(elCol)">
    YES <!-- this is displayed when it overflows, the function works -->
  </ng-container>
  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.
  <button *ngIf="overflows(elCol)">
    click me <!-- Can't get this to displayed because it is behind the text -->
  </button>            
</td>

td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 20rem;
}

可以采用 HTML/SCSS 和 TS/JS 解决方案

Max Fogdall

Asked: 2025-03-06 07:15:24 +0800 CST

当居中的 HTML 内容超出页面范围时，会进行额外的缩进

6

我有一个水平居中的 HTML，其中包含一堆<p>标签。当居中的 div 高度超出页面高度时，它会缩进 div。我该如何阻止这种情况发生？

.container {
  display: flex;
  justify-content: center;
}

.center {
  width: 600px;
  max-width: 600px;
  border-left: 1px;
  border-right: 1px;
  border-top: 1px;
  border-bottom: 1px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
}

<div class="container">
  <div class="center">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
</div>

我尝试将中心 div 中的溢出设置为“自动”。但这没有用。

即使字体大小和行高都设置为相同的固定像素值，行高仍然取决于字体系列

如何处理独立指令中的 CommonModule 引用？

html 中的两列文本未正确对齐

我该如何以下拉方式平滑地为下拉列表中的元素制作动画（仅在 CSS 中）？

如何才能使一个 SVG 路径/填充仅绘制在另一个复杂的 SVG 路径“内部”？

如何从特定点开始播放视频并在特定点停止（以秒为单位）并循环播放而无需用户交互？

godot web export 不支持其他语言的文本

如何创建仅使用 CSS 背景图像且无文本的可访问空 <a> 标签

表格单元格中的文本溢出后，Angular/HTML 添加按钮

当居中的 HTML 内容超出页面范围时，会进行额外的缩进

C++20 是否进行了更改，允许从已知绑定数组“type(&)[N]”转换为未知绑定数组“type(&)[]”？

VScode 自动卸载扩展的问题（Material 主题）

Vue 3：创建时出错“预期标识符但发现‘导入’”[重复]

具有指定基础类型但没有枚举器的“枚举类”的用途是什么？

如何修复未手动导入的模块的 MODULE_NOT_FOUND 错误？

`(表达式，左值) = 右值` 在 C 或 C++ 中是有效的赋值吗？为什么有些编译器会接受/拒绝它？

何时应使用 std::inplace_vector 而不是 std::vector？

在 C++ 中，一个不执行任何操作的空程序需要 204KB 的堆，但在 C 中则不需要

PowerBI 目前与 BigQuery 不兼容：Simba 驱动程序与 Windows 更新有关

AdMob：MobileAds.initialize() - 对于某些设备，“java.lang.Integer 无法转换为 java.lang.String”

问题[html](coding)