主页 / 问题

问题[css]

Martin Hope
ОнСамый
Asked: 2025-01-07 18:56:51 +0800 CST
  • 6

大家好。

我有一个分配有填充的文本块。调整时，文本会移动到另一行。我试图在换行后缩进并逐个字母对齐文本，就像我附加的屏幕截图中的红线一样： 屏幕

<div class="row">
   <div class="col-sm-6">
       <p><i class="fas fa fa-map-marker-alt fa-lg"></i><i style="padding: 0px 8px;">Mвывы. вввввв Lвыв</i><br>
           <i style="padding: 0px 13px;"></i>Пушкина 85<br><i style="padding: 0px 13px;"></i>ОП мира<br><i style="padding: 0px 13px;"></i>РФ<br> 
           <i class="fas fa-info fa-lg"></i><i style="padding: 0px 15px; line-height: 1.7rem; pointer-events: none;">dsdsdsds<br></i></p>
   </div>
   <div class="col-sm-6">
       <p><i class="fas fa-phone-volume fa-lg"></i><a style="padding: 0px 5px; cursor:pointer;" href="tel:+420776674190"></a>+7 84785488757<br>
           <i class="fas fa-solid fa-at fa-lg"></i><a class="test" style="padding: 0px 8px;" href="mailto:[email protected]">[email protected]</a></p>
   </div>
</div>
css
Martin Hope
Даниил Мосолов
Asked: 2024-12-01 20:00:09 +0800 CST
  • 5

有必要将箭头和链接文本设置在同一级别。我不明白如何做到这一点，我从这个网站https://monogrid.com/en/ （下面，来自页脚）获取样式，它们将链接文本按下（移位）到 li 的顶部边缘块，并且箭头位于底部链接文本边框的水平。如果您能帮助我做同样的事情，我将非常感激。

PS我不是程序员，也不是布局设计师，我在医院担任工程师，所以我不太了解，不要严格判断。

这是我的代码： https: //play.tai​​lwindcss.com/9XMHelb3hk?layout=horizo​​ntal

在蓝色背景上，它应该是这样，下面是结果

css
Martin Hope
stackoverflow
Asked: 2024-11-25 15:50:27 +0800 CST
  • 6

我连接材质图标：<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

我想让CSS图标变小：

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' -25,
  'opsz' 20
}

我用：<span class="material-symbols-outlined">search</span>

但使用的是常规图标，为什么？

应该是这样的：

在此输入图像描述

但它是这样应用的：

在此输入图像描述

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' -25, 'opsz' 20
}
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

<span class="material-symbols-outlined">search</span>

css
Martin Hope
chbronson
Asked: 2024-11-14 06:37:31 +0800 CST
  • 5

是否可以在不接触 .circle_img 类的情况下保留 .img_border 的颜色（以便它没有棕褐色）？

<style>
.circle_img img {
  height: 100px;
  width: auto;
  border-radius: 50%;
  filter: sepia(100%);
}
.img_border {
  border: 5px solid green;
}
</style>

<div class="circle_img">
  <img src="https://i.imgur.com/buzfQTm.png" class="img_border" alt="">
</div>

css
Martin Hope
ievitsky
Asked: 2024-11-09 18:19:47 +0800 CST
  • 5

简而言之：

在 iOS 上的 webap telegram 中，在 Next.js (SPA) 上应用程序的所有页面上，应用程序自上而下滚动（甚至具有“固定bottom-0”样式的导航栏）随整个页面滚动。

在开发过程中，Android 设备或 Windows 上的浏览​​器中不存在此错误。

最初的目标是使应用程序无法通过滑动关闭，这是使用 Office 实现的。指南（https://docs.telegram-mini-apps.com/platform/sticky-app），但出现了这个错误。

由于我没有 iOS 设备，调试变得很复杂，我必须不断地打扰朋友和熟人来检查下一个消除错误的假设。

也许这会对您有所帮助，帮助您找到错误所在或指出我要挖掘的方向

1. Bot制作： @PuPcoinBot（自己查看bug）

2. 该错误的视频链接： https://youtube.com/shorts/S0FrakeO18U?feature =share

3.主布局.tsx：

<>
      <Head>
        <meta charSet="UTF-8" />
        <meta
          name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" // , viewport-fit=cover
        />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      </Head>
      <Script src="https://unpkg.com/@telegram-apps/[email protected]/dist/index.iife.js"></Script>
      <Script id="tg">
        {`(function() {
      var { retrieveLaunchParams, postEvent } = window.telegramApps.sdk;
      var lp = retrieveLaunchParams();

      // Some versions of Telegram don't need the classes above.
      if (['macos', 'tdesktop', 'weba', 'web', 'webk'].includes(lp.platform)) {
        return;
      }

      // Expand the application.
      postEvent('web_app_expand');

      document.body.classList.add('mobile-body');
      document.getElementById('wrap').classList.add('mobile-wrap');
      document.getElementById('content').classList.add('mobile-content');
    })();`}
      </Script>
      <Script src="https://telegram.org/js/telegram-web-app.js"></Script>
      <html lang="en">
        <Suspense>
          <body className={inter.className}>
            <div id="wrap">
              <div id="content">{children}</div>
            </div>
          </body>
        </Suspense>
      </html>
    </>

4.CSS样式片段：

body {
  background: black;
  overflow-x: hidden;
}

html,
body {
  overscroll-behavior: none; /* Предотвращает перетягивание на iOS */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Скрыть скроллбар в Firefox */
}

body::-webkit-scrollbar {
  display: none; /* Скрыть скроллбар в Webkit (например, Safari, Chrome) */
}

.mobile-body {
  overflow: hidden;
  height: 100vh;
}

.mobile-wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: red;
}

.mobile-content {
  height: calc(100% + 1px);
  background: green;
}

我将非常感激和高兴至少有一些有关修复此错误的信息，谢谢！

css