Início / coding / 问题

Perguntas[html](coding)

Martin Hope
meallhour
Asked: 2025-04-16 13:03:58 +0800 CST
  • 6

Estou tentando entender como o recolhimento de margem se comporta quando um Contexto de Formatação de Bloco (BFC) é introduzido usando overflow: hidden.

Aqui está um exemplo mínimo reproduzível:

.outer {
  background: lightblue;
}

.inner {
  background: lightgreen;
  overflow: hidden; /* Triggers BFC */
  margin: 30px;
}

p {
  margin-top: 30px;
}
<body>
  <div class="outer">
    <div class="inner">
      <p>Paragraph inside a BFC.</p>
    </div>
  </div>
</body>

Pelo que entendi, a configuração overflow: hiddendeve .innercriar um Contexto de Formatação de Bloco, o que evita o colapso de margem entre .innere seu pai .outer.

No entanto, quando inspeciono o layout no Chrome DevTools, parece que a margem superior .innerainda está se recolhendo para cima , fazendo com que pareça .outerter uma margem superior — mesmo que não tenha.

O invólucro externo não tem margem

A margem do invólucro interno "sangra" para fora da área externa

A margem de bloco do parágrafo afeta a altura do invólucro externo

Pergunta:
Por que o colapso de margem ainda ocorre aqui, mesmo que .innerdevesse ser um BFC? Há algo que eu não esteja entendendo?

html
Martin Hope
Hoa
Asked: 2025-04-15 06:47:46 +0800 CST
  • 5

Tenho o seguinte formulário que permite ao usuário editar seu conteúdo. O formulário possui duas tags de entrada e uma textareatag.

Eu esperava que o Express retornasse o valor da entrada e textarea, mas o textareaestava vazio, deixando apenas o inputvalor da tag para retornar.

Tentei trocar a textareatag por inpute funcionou, mas como a inputtag é uma tag de texto de linha única, quero uma tag de texto de várias linhas para lidar com parágrafos longos do usuário.

Aqui está meu código:

app.post("/editBlog", (req, res) => {
  // console.log(`Edit blog at index: ${editBlogIndex}`);
  const blogToEdit = posts[editBlogIndex];
  // console.log(blogToEdit);
  blogToEdit.fname = req.body["fullname"];
  blogToEdit.title = req.body["title"];
  blogToEdit.blogContent = req.body["content"];
  res.render("edit-blog.ejs", {
    posts: posts
  });
})

Aqui está o código do arquivo expresso:

<form action="/editBlog" method="post">
  <div class="form-group">
    <label for="fullname">名前:</label>
    <input type="text" id="fullname" name="fullname" placeholder="フルネーム" value="<%= blogEdit.fname %>"><br>
  </div>
  <div class="form-group">
    <label for="title">タイトル:</label>
    <input type="text" id="title" name="title" placeholder="投稿タイトル" value="<%= blogEdit.title %>"><br>
  </div>
  <div class="form-group">
    <label for="content">内容:</label>
    <textarea id="content" name="content" placeholder="投稿内容" value="<%= blogEdit.blogContent %>" style="height:200px"></textarea>
  </div>
  <div class="d-grid gap-2 col-6 mx-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Como faço para obter o retorno expresso do valor da textareatag?

html
Martin Hope
johnsankey
Asked: 2025-04-15 05:10:06 +0800 CST
  • 0

Acho que em HTML, então para começar codifiquei uma tabela de largura responsiva da seguinte maneira:

<table style="width:100%; color: black; font-family: Arial, sans-serif">
  <tr>
    <td style="width: 20%; font-size: 1.7vw; font-weight: bold" valign=top>
      &nbsp; Agent
    </td>
    <td style="width:70%; font-size: 1.4vw" valign=top>
      details of agent
    </td>
  </tr>
</table>

A tabela tem meia dúzia de linhas, então repetir toda a bagunça acima para cada linha funciona. Mas é uma porcaria!
Alguém tem alguma sugestão para limpar isso para que fique apenas uma tabela HTML, mas com código legível?

html
Martin Hope
levent001
Asked: 2025-04-11 21:37:44 +0800 CST
  • 6

Estou usando a detailstag maravilhosa da seguinte maneira, que expande o conteúdo quando um link é clicado:

summary::marker {
  content: " ";
}

summary {
  color: blue;
  text-decoration: underline;
  cursor: pointer;

}
<details>
  <summary>Show Details</summary>
  <h2>HTML Details</h2>
  <p>Explanation of the topic</p>
</details>

Esta tag permite incluir todos os tipos de tags HTML, incluindo imagens a serem incluídas nos detalhes expandidos.

Por exemplo, o código acima mostrará primeiro o seguinte:

insira a descrição da imagem aqui

e quando o link "Mostrar detalhes" for clicado, o HTML será expandido para aquele tópico específico: insira a descrição da imagem aqui

Observe que na forma expandida, o termo "Teorema de Pitágoras" está em negrito, pois usei a btag.

Funciona bem.

Mas me deparei com uma situação em que uma única página contém cerca de 300 desses tópicos, e "Mostrar detalhes" para cada um deles inclui cerca de 3 arquivos de imagem cada.

Isso significa que terei cerca de 900 imagens carregadas naquela página assim que alguém a visitar. Isso não é bom, pois o carregamento será lento e o visitante poderá clicar em apenas 1 ou 2 tópicos em expansão. Portanto, não é necessário carregar todas as 900 imagens.

Eu estava procurando uma personalização que permitisse que, ao clicar no link "Mostrar Detalhes" de um tópico específico, apenas aquele HTML específico fosse carregado e exibido. Combinar AJAX/JS é uma solução, mas o AJAX tem a limitação de não fechar o link expandido anteriormente automaticamente.

Algo como combinar a detailstag e o AJAX, de modo que a expansão de uma mostre aquela imagem específica e feche a outra imagem. ( detailsa tag permite que apenas um elemento clicado seja exibido e fecha automaticamente o clicado anteriormente).

html
Martin Hope
코딩마스터
Asked: 2025-04-11 16:22:33 +0800 CST
  • 5

Estou tentando criar uma grade nxn de blocos que caibam em um contêiner fixo (800px x 700px). Consegui gerar o número correto de blocos usando JavaScript, mas estou com dificuldades para alinhá-los perfeitamente no contêiner usando CSS.

Cada bloco deve ser redimensionado automaticamente para que todos os blocos n² caibam exatamente no contêiner sem transbordar, e eles devem formar um layout de grade perfeito.

Aqui está meu código atual:

const btn = document.createElement("button");
const body = document.querySelector("body");
body.appendChild(btn);
btn.className = "button";
btn.textContent = "button";

const container = document.createElement("div");
container.className = "container";
body.appendChild(container);

btn.addEventListener("click", () => {
  let select = Number(prompt("수 입력: "));
  container.innerHTML = ""; // clear existing boxes

  for (let i = 0; i < select * select; i++) {
    const div = document.createElement("div");
    div.className = "box";
    div.style.width = `calc(800px / ${select})`;
    div.style.height = `calc(700px / ${select})`;
    container.appendChild(div);
  }
});
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 800px;
  height: 700px;
  border: 3px solid black;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  border: 1px solid black;
}

html
Martin Hope
Michael
Asked: 2025-04-11 15:18:56 +0800 CST
  • 5

O ícone encolhe quando o texto é quebrado e fica menor que os 36 px especificados em CSS. Exemplo

O ícone é incluído usando o pseudoelemento "antes".

Alguma ideia do porquê isso acontece e como consertar?

A sintaxe é a seguinte:

.initial {
  align-items: center;
  display: flex;
  font-size: 12px;
  margin: 10px 0px 10px 0px;
}

.initial::before {
  content: attr(data-initials);
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: #111111;
  border-radius: 100% 100% 100% 100%;
  color: #ffffff;
  height: 36px;
  letter-spacing: 1px;
  line-height: 12px;
  margin-right: 10px;
  text-transform: uppercase;
  width: 36px;
}
<div class="row">
  <div data-initials="A" class="col-md-6 initial">
    This is a smaller text.
  </div>
</div>

<div class="row">
  <div data-initials="A" class="col-md-6 initial">
    This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text.
  </div>
</div>

html
Martin Hope
user30195264
Asked: 2025-04-11 14:16:44 +0800 CST
  • 2
  1. Existe alguma fórmula ou função no Google Apps Script que efetue o logout automaticamente da página da Web a cada 15 minutos?
  2. Existe alguma fórmula ou função no Google Apps Script que efetue o logout automático da página da Web sempre que a aba for fechada?

Aqui está meu código de login e logout

    let MySheets  = SpreadsheetApp.getActiveSpreadsheet();
    let LoginSheet  = MySheets.getSheetByName("Overall");   

    function doGet(e) {
      var output = HtmlService.createTemplateFromFile('Login');
      const IMAGEID = "10X-Rh5CwfLb46ITf0iC3ebnILULk7nTc"
      var sess = getSession();
       if (sess.loggedIn) {
         output = HtmlService.createTemplateFromFile('Main');
      }
      
              
      return output.evaluate().setTitle('Database Page')
      .addMetaTag('viewport', 'width=device-width, initial-scale=1')
      .setFaviconUrl(`https://drive.google.com/uc?id=${IMAGEID}&export=download&format=png`);
    }

    function myURL() {
      return ScriptApp.getService().getUrl();
    }

    function setSession(session) {
      var sId   = Session.getTemporaryActiveUserKey();
      var uProp = PropertiesService.getUserProperties();
      uProp.setProperty(sId, JSON.stringify(session));
    }


    function getSession() {
      var sId   = Session.getTemporaryActiveUserKey();
      var uProp = PropertiesService.getUserProperties();
      var sData = uProp.getProperty(sId);
      return sData ? JSON.parse(sData) : { loggedIn: false };
    }

    function loginUser(pUID, pPassword) {
        
        if (loginCheck(pUID, pPassword)) {
          
          var sess = getSession();
          sess.loggedIn = true;
          sess.uid = pUID;
          setSession(sess);

            return 'success';
        } 
        else {
            return 'failure';
        }
    }


    function logoutUser() {
      var sess = getSession();
      sess.loggedIn = false;
      setSession(sess);
    }


    function loginCheck(pUID, pPassword) {
      let LoginPass =  false;
          let ReturnData = LoginSheet.getRange("Af:Af").createTextFinder(pUID).matchEntireCell(true).findAll();
            
            ReturnData.forEach(function (range) {
              let StartRow = range.getRow();
              let TmpPass = LoginSheet.getRange(StartRow, 33).getValue();
              if (TmpPass == pPassword)
              {
                  LoginPass = true;
              }
            });

        return LoginPass;
    }

E aqui está uma folha onde você pode trabalhar ou copiar as informações.

https://docs.google.com/spreadsheets/d/1ht3xdeLDH8jL4rKKs4SdAxMZk_4eG_e2xrZwWs0eVys/edit?gid=0#gid=0

html
Martin Hope
Gauravsa
Asked: 2025-04-11 10:21:32 +0800 CST
  • 5

Como centralizar uma imagem em uma linha de tabela. Atualmente, tenho uma div como esta no Bootstrap:

insira a descrição da imagem aqui

<div class="container-fluid">
<div class="row align-items-center exclusion-empty">
    <div class="col"></div>
    <div class="col-1 lock-circle">
        <span>
            <i class="fa-regular fa-lock-keyhole lock-icon"></i>
        </span>
    </div>
    <div class="col"></div>
</div>
</div>

com css:

.lock-circle[b-pzm1s2lx32] {
border-radius: 50%;
background-color: grey;
border: 3px solid white;
width: 4.25rem;
height: 4.25rem;
}

.exclusion-empty {
margin-top: 0.63rem;
height: 8.125rem;
flex-shrink: 0;
background: #F8F8F8;
}

.align-items-center {
align-items: center !important;
}

Tentei usar assim em uma tabela:

<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th scope="col" class="col-3">
                Excluded candidate
            </th>
            <th scope="col" class="col-1">
                Votes to transfer
            </th>
            <th scope="col" class="col-3">
                Remaining candidates
            </th>
            <th scope="col" class="col col-width-1">
                Exc 1<br />total
                
            </th>
            <th scope="col" class="col col-width-1">
                Transfer <br />votes
            </th>
            <th scope="col" class="col col-width-1">
                Transfer % total
            </th>
            <th scope="col" class="col col-width-1">
                Excl 1 <br />total
            </th>
            <th scope="col" class="col col-width-1">
                Overall % total
            </th>
        </tr>
    </thead>
    <tbody>
    <tr class="exclusion-empty">
        <td colspan ="3"></td>
        <td colspan="2" class="lock-circle align-items-center ">
            <span>
                <i class="fa-regular fa-lock-keyhole lock-icon"></i>
            </span>
        </td>
        <td colspan ="3"></td>
    </tr>
    </tbody>
</table>
</div>

Isso está produzindo uma saída como esta:

insira a descrição da imagem aqui

html
Martin Hope
teusbenschop
Asked: 2025-04-10 22:14:16 +0800 CST
  • 6

Como o pugixml pode gerar um atributo sem um valor?

Considere o seguinte html desejado:

<option value="book" selected>book</option>

A questão é sobre o selectedatributo, como adicioná-lo através do pugixml.

Aqui está o código que uso atualmente para gerar esse atributo:

option_node.append_attribute("selected");

Este código adiciona um valor vazio ao atributo, da seguinte maneira:

<option value="book" selected="">book</option>

html
Martin Hope
windows9
Asked: 2025-04-10 04:59:32 +0800 CST
  • 5

Tenho uma grade CSS que flui verticalmente e se ajusta a uma nova coluna quando a primeira está cheia. Eu esperava que a largura desse elemento da grade fosse igual à largura de suas colunas. No entanto, ele parece estar somando as larguras de todos os seus elementos filhos.

Especificamente, se você alterar a largura de um dos elementos menores (por exemplo, alterar 4a para 4aa), embora a largura da coluna em que ele está não mude, a largura de toda a grade muda. Isso não parece ser um comportamento correto.

Como posso garantir que a grade ocupe apenas a largura de suas colunas?

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid {
  border: 1px solid black;
  height: 200px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fit, 35px);
  grid-auto-columns: min-content;
}

.grid > * {
  display: flex;
  border: 1px solid gray;
}
<div class="parent">
  <p>label</p>
  <div class="grid">
    <div>1aaaaa</div>
    <div>2aaa</div>
    <div>3aa</div>
    <div>4a</div>
    <div>5aa</div>
    <div>6aa</div>
    <div>7a</div>
  </div>
</div>

O seguinte seria o comportamento esperado, mas eu gostaria que o pai fosse um flexbox de coluna.

.grid {
  border: 1px solid black;
  height: 200px;
  display: grid;
  width: min-content;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fit, 35px);
  grid-auto-columns: min-content;
}

.grid > * {
  display: flex;
  border: 1px solid gray;
}
<div class="parent">
  <p>label</p>
  <div class="grid">
    <div>1aaaaa</div>
    <div>2aaa</div>
    <div>3aa</div>
    <div>4a</div>
    <div>5aa</div>
    <div>6aa</div>
    <div>7a</div>
  </div>
</div>

html