Início / coding / 问题

Perguntas[html](coding)

Martin Hope
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>

Ambos font-sizee line-heightsão definidos como 16px. No entanto, a altura real das linhas ainda depende de is font-familyou monospace. sans-serifO que mais preciso definir para obter alturas de linha uniformes?

captura de tela

html
Martin Hope
kshetline
Asked: 2025-03-09 23:38:07 +0800 CST
  • 6

Estou tentando migrar uma biblioteca antiga de componentes Angular para componentes autônomos.

Vários componentes têm muito em comum, então eu uso uma superclasse para todo o comportamento comum. Pelo menos como eu estava acostumado a fazer as coisas, a superclasse de a @Componentnão deveria ser another @Component, mas sim a @Directive.

O início da superclasse se parece com isso:

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

E um dos componentes da subclasse começa assim:

// @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 {
// ...

O problema agora, ao portar isso para o Angular 19 e tentar usar um design independente, é que o HTML para a diretiva contém alguns recursos do CommonModule como [ngClass]e [ngStyle]. (Também há usos de *ngIfe semelhantes, mas posso me livrar deles usando @if, @for, etc.)

Uma recomendação não funcionalCommonModule do Google AI para usar recursos em uma diretiva se parece com isto:

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;
    }

Se eu não puder usar importsuma diretiva, como resolvo o problema da linha vermelha ondulada abaixo?

insira a descrição da imagem aqui

html
Martin Hope
lm.
Asked: 2025-03-08 03:34:57 +0800 CST
  • 5

Estou tentando formatar html para ter texto formatado por 2 colunas. Estou tentando fazer da seguinte forma:

.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>

Mas quando abro este arquivo no navegador, vejo que o texto está dividido em 2 colunas, mas as linhas entre 2 colunas não estão alinhadas verticalmente (como pode ser visto na captura de tela): insira a descrição da imagem aqui. O que preciso fazer - é que a linha #1 na linha #4 na página de amostra estará na mesma altura. Tentei usar flex, mas isso faz com que o texto seja dividido em mais de 2 colunas. O que está faltando no estilo? Obrigado antecipadamente

html
Martin Hope
Sarah Z
Asked: 2025-03-07 08:03:32 +0800 CST
  • 7

(Ainda sou bem novo em HTML e CSS, então tenha paciência comigo) Tenho tentado personalizar este site para torná-lo mais agradável aos olhos. Uma das coisas que gostaria de fazer é personalizar os menus suspensos em "Navegar" e "Enviar" para que, quando você passar o mouse sobre eles, eles se estendam suavemente para baixo, como um efeito de deslizamento. Quero animar o menu suspenso em si e o texto dentro dele juntos.

O segmento de HTML que estou analisando é este:

.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>

Já tentei algumas coisas por conta própria e apliquei isso ao meu CSS até agora:

Honestamente, essas são apenas algumas tentativas de fazê-lo se mover em primeiro lugar. Os problemas que vejo incluem o menu suspenso SOMENTE se estendendo ao passar o mouse sobre a caixa em si e não o botão "Enviar", o bloco atrás do texto aparecendo imediatamente ao passar o mouse em vez de deslizar para fora do nada, e não ser capaz de fazer o bloco atrás do texto se estender sozinho; ele salta para fora não importa o que eu faça.

Sinceramente, estou muito confuso, então qualquer ajuda seria muito apreciada!

html
Martin Hope
user29587692
Asked: 2025-03-07 04:23:11 +0800 CST
  • 5

Tenho uma forma de garrafa em SVG que tem um redemoinho decorativo e algumas outras linhas cruzando o interior, de modo que não tenho certeza do que conta como "dentro" e "fora" do caminho. Quero colocar uma forma de onda "dentro" da garrafa, mas não estou obtendo nenhum resultado positivo experimentando <clipPath>e não tenho certeza se as linhas internas da garrafa estão trabalhando contra mim.

O que eu tenho atualmente, onde a forma de onda fica na parte superior da garrafa:

  * {
    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>

Cercar o caminho da garrafa com uma <clipPath>etiqueta faz com que apenas a forma da onda apareça:

  * {
    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>

Ao redor do caminho da onda é <clipPath>exibida apenas a garrafa:

  * {
    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>

Este é o caminho da garrafa carregado em um editor SVG do navegador: 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

html
Martin Hope
DXB-DEV
Asked: 2025-03-07 00:54:55 +0800 CST
  • 6

Quero reproduzir um vídeo (mp4) começando de um ponto específico (60 segundos), parar em um ponto específico (100 segundos) e repetir a reprodução sem interação do usuário.

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

Alguém pode sugerir uma maneira?

html
Martin Hope
Sina
Asked: 2025-03-06 20:30:33 +0800 CST
  • 5

Estou desenvolvendo um jogo com o motor de jogo Godot para a plataforma web. O problema é que quando quero dar saída para a web, apenas o texto em inglês é exibido corretamente e o restante do idioma não é exibido corretamente. O exemplo está na imagem:

insira a descrição da imagem aqui

Embora não haja tal problema para outras saídas como Android ou Windows. Alguém sabe de onde vem o problema?

html
Martin Hope
stanley
Asked: 2025-03-06 19:55:53 +0800 CST
  • 5

Como você pode criar uma tag vazia acessível com apenas uma imagem de fundo CSS, por exemplo, para um link de mídia social.

Então a única tag HTML seria:

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

E o CSS seria:

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

Pergunta de estouro de pilha semelhante aqui, mas não fornece sintaxe específica para esta pergunta: Acessibilidade HTML, elementos vazios são permitidos?

html
Martin Hope
Wouter Vandenputte
Asked: 2025-03-06 18:47:03 +0800 CST
  • 6

Tenho uma tabela e algumas células estouram. Essas <td>têm uma classe que dá a elas reticências no final. Mas há uma maneira de adicionar um pequeno botão/span/qualquer coisa DEPOIS das reticências?

<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;
}

Podem ser empregadas soluções HTML/SCSS e TS/JS

html
Martin Hope
Max Fogdall
Asked: 2025-03-06 07:15:24 +0800 CST
  • 6

Tenho um HTML que é centralizado horizontalmente e contém um monte de <p>tags. Quando a altura do div centralizado excede a altura da página, ele recua o div. Como posso impedir que isso aconteça?

.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>

Tentei definir overflow como 'auto' no div central. Isso não funcionou.

html