Questions tagged «html»

我有一个动态创建的布局： for (let i = 1; i < 10; i++) { document.querySelector('.card-body').innerHTML += `<div class="row" id="img_div"> <div class="col-12 col-sm-12 col-md-2 text-center"> <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80"> </div> <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6"> <h4 class="name"><a href="#" id="title` + i + `">Name</a></h4> <h4> <small>state</small> </h4> <h4> <small>city</small> </h4> <h4> <small>zip</small> …

12 javascript  html  innerhtml 

这个问题似乎是某些字母一样g，y，q等有一个尾巴向下倾斜，不允许垂直居中。这是展示问题的图像。 绿色框中的字符基本上是完美的，因为它们没有向下的尾巴。红色框中的内容演示了该问题。 我希望所有字符都垂直居中对齐。在图像中，尾巴向下的字符未垂直居中。这可以纠正吗？ 这是充分说明问题的小提琴。 .avatar { border-radius: 50%; display: inline-block; text-align: center; width: 125px; height: 125px; font-size: 60px; background-color: rgb(81, 75, 93); font-family: "Segoe UI"; margin-bottom: 10px; } .character { position: relative; top: 50%; transform: translateY(-50%); line-height: 100%; color: #fff; } <div class="avatar"> <div class="character">W</div> </div> <div class="avatar"> <div class="character">y</div> …

12 javascript  html  css  vertical-alignment 

我尝试了多种方法使表格适合页面（A4），如图所示： 我进行了很多搜索，但找不到任何有用的网络内容。我正在使用动态表格，除表格的宽度外，其他一切都正常。这是我的代码： $content = '<table><thead><tr><th class="bg-dark text-white" align="center">#</th><th align="center" class="bg-dark text-white">Code</th><th align="left" class="bg-dark text-white">Description</th><th align="center" class="bg-dark text-white">Item Type</th></tr></thead><tbody><tr style="background-color: #f2f2f2;"><td align="center">1</td><td align="center">1001</td><td align="left">Pofak</td><td align="center">Fixed Price</td></tr><tr ><td align="center">2</td><td align="center">1002</td><td align="left">Ice</td><td align="center">Weight</td></tr><tr style="background-color: #f2f2f2;"><td align="center">3</td><td align="center">1003</td><td align="left">Minoo</td><td align="center">Fixed Price</td></tr><tr ><td align="center">4</td><td align="center">1004</td><td align="left">Bastani</td><td align="center">Fixed Price</td></tr><tr style="background-color: #f2f2f2;"><td align="center">5</td><td align="center">1005</td><td align="left">Chocolate</td><td align="center">Weight</td></tr><tr ><td …

11 php  html  css  tcpdf 

我的前端有一个页面，其中包含不同的按钮，所有按钮都可以单独正常工作，但是如果我单击在chrome网站商店中打开扩展程序的按钮，然后再单击另一个按钮，则该页面不会打开。 这是我正在谈论的事的典范。如果您在未关闭要打开的标签的情况下单击按钮，则在chrome网上应用店打开后单击的按钮将无效。有人知道这是为什么以及如何解决吗？ https://html-ichr7r.stackblitz.io 这是它的代码。 <button id="button1" onclick="window.open('https://www.facebook.com/','popup','width=700,height=300');"><strong>CONTINUAR</strong></button><br> <button id="button2" onclick="window.open('https://www.google.com/','popup','width=700,height=300');"><strong>CONTINUAR</strong></button> <button id="button3" onclick="window.open('https://chrome.google.com/webstore/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj?hl=de','popup','width=700,height=300');"><strong>CONTINUAR</strong></button><br> <button id="button4" onclick="window.open('https://www.9gag.com/','popup','width=700,height=300');"><strong>CONTINUAR</strong></button> 任何帮助表示赞赏！ 编辑：我刚刚发现它可以在Firefox中使用，但仍然不知道为什么它不能在Chrome中使用。

11 javascript  html  google-chrome 

我创建了以下这样的绘图： import plotly labels = ['Oxygen', 'Hydrogen', 'Carbon_Dioxide', 'Nitrogen'] values = [4500, 2500, 1053, 500] trace = plotly.graph_objs.Pie(labels=labels, values=values) plotly.offline.plot([trace], filename='basic-pie-chart') 然后，我这样创建了html： print(plotly.offline.plot([trace], include_plotlyjs=False, output_type='div')) 运行上面的代码会生成一个.html文件，我可以在浏览器中查看该文件。 有没有办法在GitHub Pages的markdown文件中间显示.html文件，这样我就可以使用plotly的交互功能？ 这是我问过的类似问题

10 python  html  markdown  plotly  github-pages 

我正在尝试模仿其他移动聊天应用程序，在这些应用程序中，当您选择send-message文本框并打开虚拟键盘时，最底部的消息仍在显示中。似乎没有办法用CSS来做到这一点，所以JavaScript resize（显然是找出何时打开和关闭键盘的唯一方法）是事件和手动滚动以进行救援。 有人提供了这个解决方案，我发现了这个解决方案，两者似乎都可以工作。 除了一种情况。出于某种原因，如果您位于MOBILE_KEYBOARD_HEIGHT消息div底部（在我的情况下为250像素）以内，则当您关闭移动键盘时，会发生一些奇怪的情况。使用前一种解决方案，它会滚动到底部。使用后一种解决方案时，它会MOBILE_KEYBOARD_HEIGHT从底部向上滚动像素。 如果滚动到该高度以上，则上面提供的两个解决方案都可以正常工作。只有当您接近底部时，他们才会遇到这个小问题。 我以为可能只是我的程序导致了一些奇怪的流浪代码，但不，我什至重现了一个小提琴，它确实有这个问题。我很抱歉使调试变得如此困难，但是如果您在手机上访问https://jsfiddle.net/t596hy8d/6/show（显示后缀提供全屏模式），您应该可以看到同样的行为。 如果您向上滚动足够，打开和关闭键盘将保持该位置。但是，如果将键盘关闭在MOBILE_KEYBOARD_HEIGHT底部像素以内，则会发现它滚动到底部。 是什么原因造成的？ 这里的代码复制： window.onload = function(e){ document.querySelector(".messages").scrollTop = 10000; bottomScroller(document.querySelector(".messages")); } function bottomScroller(scroller) { let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; scroller.addEventListener('scroll', () => { scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; }); window.addEventListener('resize', () => { scroller.scrollTop = scroller.scrollHeight - scrollBottom - …

10 javascript  android  html  css  reactjs 

昨天我问了一个类似的问题，但解释得很差，并且没有说明我对纯CSS解决方案的渴望，我认为这应该是可能的，因此我正在尝试。 基本上，我遇到了一个问题，即我有一个可滚动消息div，并且在其下方有一个输入字段。当我单击一个按钮时，我希望输入字段增加100像素，而消息区域也不滚动。 这是一个小提琴，充分展示了问题所在 如您所见，当您单击“添加边距”按钮时，消息div也将向上滚动。我希望它能保持原样。同样，如果您稍微向上滚动，因此只能看到倒数第二条消息，则单击按钮时应类似地保持该位置。 有趣的是，这种行为“有时”得以保留。例如，在某些情况下（我无法完全推断），滚动位置得以保留。我只希望它始终如一。 window.onload = function(e) { document.querySelector(".messages").scrollTop = 10000; }; function test() { document.querySelector(".send-message").classList.toggle("some-margin"); } .container { width: 400px; height: 300px; border: 1px solid #333; display: flex; flex-direction: column; } .messages { overflow-y: auto; height: 100%; } .send-message { width: 100%; display: flex; flex-direction: column; } .some-margin …

10 javascript  html  css  scroll  scrollbar 

从简单的登录页面单击到重量级的单页面应用程序时，我一直在尝试使用类似的方法来提高性能： <link rel="prefetch" href="https://example.com" as="document" /> <link rel="prefetch" href="https://example.com/app.js" as="script" /> <link rel="prefetch" href="https://example.com/app.css" as="style" /> 当我的目标网页位于子域上时，似乎没有明显的性能提升。说，https://subdomain.example.com。 当我点击要访问的链接时https://example.com，我仍然在Chrome的“网络”标签中看到app.js并app.css加载了很长的延迟： 这是禁用预取的相同资源： 总共花费的时间大致相同。 请求标有预取缓存的资产之一的标头： 一般： Request URL: https://example.com/css/app.bffe365a.css Request Method: GET Status Code: 200 (from prefetch cache) Remote Address: 13.226.219.19:443 Referrer Policy: no-referrer-when-downgrade 响应： accept-ranges: bytes cache-control: max-age=31536000 content-encoding: gzip content-length: 39682 content-type: …

10 html  link-prefetch 

我正在开发一个单页Web应用程序，该应用程序通常会在移动设备上使用。它的功能之一是地图模式，它会临时接管整个浏览器窗口。距离比例尺和一些控件连接到地图的四个角。这是地图的一些屏幕截图，因此您可以知道我在说什么： 该图是作为一个<div>与position: fixed所有四个坐标为零; 我还将在地图可见时临时将设置为<body>，overflow: hidden以处理基础应用程序显示远离原点滚动的情况。这足以使地图完全按照我在桌面浏览器上的方式工作。移动浏览器还要求我给meta视口标签加上类似的东西"width=device-width,user-scalable=no"，以使窗口的可见区域与视口完全对应。 几年前，当我最初编写此应用程序时，所有这些方法的运行都很漂亮，但是iOS Safari沿途停止了任何涉及缩放的元视口选项-显然有太多站点在错误地使用了标签，导致文本小得难以理解，但不可缩放。当前，如果在此浏览器上启用地图，则可能会获得稍微放大的视图，该视图会切断右侧和底部的那些按钮-您对此无能为力，因为所有触摸都被解释为地图的缩放/平移手势，而不是浏览器滚动。没有通过这些按钮访问的功能，地图就不是非常有用-没有右上角的按钮，您甚至无法关闭地图。唯一的方法是重新加载页面，这可能会导致未保存的数据丢失。 我肯定会添加history.pushState/ 的使用，onpopstate以便地图覆盖的行为就像单独的页面一样。您可以使用浏览器的“后退”按钮退出地图模式-但这不能解决由于缺少按钮而导致的其他功能损失。 我已经考虑过使用.requestFullscreen()来实现地图叠加层，但是并非所有地方都支持该应用程序可用。特别是，它显然根本无法在iPhone上使用，在iPad上，您会看到一个状态栏和一个巨大的“ X”按钮，该按钮覆盖您的内容-我的距离刻度可能不再可读。无论如何，这并不是我真正想要的语义-我需要整个窗口，而不是整个屏幕。 如何在现代浏览器上显示全窗口显示？我可以在该主题上找到的所有信息都涉及使用meta视口标记，但是正如我提到的那样，它不再起作用。

10 html  css  mobile-safari  fullscreen 

为了填充整个页面的高度，我使用height: 100%;了html和body标签，并且在关闭浏览器并重新打开之前，它可以正常工作。（由于移动设备上的问题，我不使用100vh https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html） 重现步骤： 在iPhone上的Google Chrome浏览器中打开https://angelika94.github.io/rick/（您会看到导航（Morty和Beer）位于页面底部）的CSS Rick屏幕截图 关闭浏览器并将其从多任务导航中删除：https : //support.apple.com/zh-cn/HT201330 再次打开浏览器（您将看到底部导航移离了“第一个屏幕”，现在您需要滚动才能看到它） css Rick的屏幕快照，不带导航 在以下情况下，页面将自行修复： 更新页面 将设备旋转到横向 通过标签打开和关闭浏览器的导航 关闭并重新打开浏览器，而无需在多任务导航中将其关闭 为什么会发生？如何解决此问题？ 先感谢您！

10 html  css  height  google-chrome-app 

自Chrome v78.0.3904.70发布以来，我发现 CSS属性的使用存在问题white-space: nowrap;。不间断的空格似乎导致换行。使用时text-overflow: ellipsis，实际文本将不会显示，因为它在容器外部被打断了。似乎只有在文本太长而无法显示时才会发生。 .box-inline { max-width: 120px; overflow: hidden; height: 16px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } <div class="mar-rgt box-inline text-sm"><span class="label" style="background: rgb(176, 223, 246);"></span> Not meeting expecations</div> 运行代码段隐藏结果展开摘要 它在我们的应用程序上引起了一些显示问题。这是错误还是我的代码有问题？ 该代码在React 16中呈现。

10 html  css  google-chrome  whitespace 

遵循我的一小段代码。只是想知道为什么“ iphone”单元仅从iphone闪烁。PS。我不能使用表格或列表作为结构。我也尝试使用transform: translate3d(0,0,0);。 基本上，我也需要第一个单元格同时在iPhone和iPad上同时保持Left和Top的粘性。我只想使用HTML和CSS来做到这一点。 重要 请不要回答固定的解决方案，我不知道桌子会放在身体的什么位置。将有一个标题，一些内容等。 显示代码段 .table { width: 2000px; position: relative; } .tr { overflow: visible; display: block; white-space: nowrap; font-size: 0; } .tc { border: 1px solid #DDD; display: inline-block; width: 100px; height: 100px; text-align: center; font-size: 12px; } .trh { background: #000; color: #FFF; position: -webkit-sticky; …

10 html  css 

从文件对话框中选择文件并单击“确定”后，如何改善此代码以消除不响应/页面滞后？ 我一直在测试大小约为50-100 KB的文件 function handleFileSelect(evt) { var files = evt.target.files; // FileList object // files is a FileList of File objects. List some properties. var output = []; for (var i = 0, f; f = files[i]; i++) { output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, …

9 javascript  html 

我一直挑战自己，以仅HTML和CSS（无Javascript）创建视觉上动态的交互式体验。到目前为止，我还没有遇到我在纯CSS和HTML中无法实现的任何功能。这可能有点困难。 我需要防止双击用户<a>，<input type="submit">和<button>标签。这是为了防止他们重复提交表单或意外向URL发出2个GET请求。如何在纯CSS中完成此操作？即使我们不能disabled没有JS进行设置，也应该有一些遮罩技术或样式组合可以在2020年处理。 这是一个简单的尝试示例： .clicky:focus{ display: none; pointer-events: none; } <a href="#down" class="clicky">test</a> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p id="down">target</p> 运行代码段隐藏结果展开摘要 不幸的是，由于某些原因，这会在触发实际的点击事件之前将其禁用。也许锚不是最好的测试方法？我将继续作进一步的尝试。

9 html  css 

我制作了一个包装纸，在其Airpods Pro页面上制作了与Apple相同的效果。基本上是视频，当我滚动视频时会一点一点地播放。视频的位置是固定的，因此文本可以很好地滚动。但是，只有在特定分隔的偏移量之间（文本显示），文本才可见。 那部分工作正常。现在，我希望当用户滚动到视频的末尾并结束动画时，将视频效果包装器从固定位置转到相对位置。这样该网站将在视频动画后正常滚动其内容。 JSFIDDLE代码+演示 这是我已经尝试过的一个示例： //If video-animation ended: Make position of video-wrapper relative to continue scrolling if ($(window).scrollTop() >= $("#video-effect-wrapper").height()) { $(video).css("position", "relative"); $("#video-effect-wrapper .text").css("display", "none"); } 这种工作...但是除了顺利以外，其他所有事情都是如此。并且还需要使网页反向滚动。 尝试解决此问题时遇到的问题： 滚动以及从固定需求到相对需求的过渡，感觉自然而流畅 包装器本身不是固定的，包含.text元素，视频是固定的，因此.text元素可以覆盖video元素（创建效果）。这些.text元素会导致尝试找到解决方案的问题

9 javascript  jquery  html  css