css 相关问题

用 CSS 和 JS 实现倒置动画

我用这段代码创建了一个FAB。 让 fab = document.querySelector('.fab'); 让容器 = document.querySelector('.fab-container'); 让 fabItems = document.querySelectorAll('.fab-list-item...

带分隔符的引导按钮组

如何获取每个按钮之间带有边框线分隔符的 Bootstrap 按钮组？ 如何获取每个按钮之间带有边框线分隔符的 Bootstrap 按钮组？ <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> </div> https://getbootstrap.com/docs/4.6/components/button-group @padaleiana 解决方案运行良好！我使用了 btn-light 禁用按钮作为分隔符。 解决方法： 创建一个带有 mr-0、ml-0、pl-0 和 pr-0 类的按钮（左右边距和填充 = 0），并带有 disabled 属性（否则“分隔符”将不会出现！） <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button> <button type="button" class="btn btn-secondary">3</button> </div> padaleiana 的答案的替代方案如下，它不使用 HTML 按钮标签。因此，当 jQuery（或其他 Javascript）迭代按钮时，它可以避免出现问题： <div class="alert alert-dark m-0 px-0"></div> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <div class="alert alert-dark m-0 px-0"></div> <button type="button" class="btn btn-secondary">2</button> <div class="alert alert-dark m-0 px-0"></div> <button type="button" class="btn btn-secondary">3</button> </div> 可以只添加类“btn-outline-secondary”或任何一个适合您需要的每个按钮......例如：- <div class="btn-group btn-group-sm"> <button class="btn btn-light btn-outline-secondary btn-sm">Btn One</button> <button class="btn btn-light btn-outline-secondary btn-sm">Btn Two</button> <button class="btn btn-light btn-outline-secondary btn-sm">Btn Three</button> </div>

我可以隐藏或删除博客上的评论日期吗？

我有一个问题，我尝试隐藏博客上的日期评论，但没有成功，有人可以帮忙吗

Overflow-y 滚动导致内容被截断

我目前有一个最大高度为 800px 的容器。它还具有溢出-y：滚动。我想要完成的事情很简单（可能不那么简单，因此我问你们！）。 我...

顺风的w屏和h屏打破了响应速度

我正在尝试使用 Nextjs 和 typescript 制作 404 页面。以下是屏幕截图： 如您所见，我的右侧和底部都有滚动条，它们破坏了响应能力。 我...

如何为 PrimeNG TabView 创建自定义选项卡滑块动画？

我正在尝试为 PrimeNG TabView 创建自定义底部边框滑块。 Angular Material 具有开箱即用的功能，但 PrimeNG 没有。 动画应该是一个简单的边框底部幻灯片，来自...

为什么position:sticky设置为top:0的元素和父元素顶部之间仍然存在极窄的间隙？

在此处输入图像描述祖先容器应用transform:scale后，即使将position:sticky的元素设置为top:0，仍然存在极窄的间隙b...

右浮动文本

尝试将 div 中的文本与浮动右对齐 尝试向我的信息添加选项卡，似乎正在使用电话号码，但如果我将其浮动正确，则不起作用。 还有当我的sc...

CSS 绝对定位父级并在子级内居中

我正在尝试创建 CSS 来实现以下目标，其中： 浏览器窗口 Div 绝对定位为主浏览器窗口上的页脚 (2) 的子项，其中文本是垂直的并且

Module.css 加载成功但未定义

我从 module.css 导入数据，但它是未定义的。 从“../css/basic-styles.module.css”导入样式； console.log(styles) // 未定义。 我的 basic-styels.module.css 有数据 *{

标签和输入随着错误的 div 移动

每次我调整当前成绩名称输入的位置时，由于某种原因，整个成绩点输入都会随之改变。 /* 最终成绩计算器： （通缉等级 - （当前等级...

<pre>需要什么CSS来换行长线，但只是所需的最小宽度？

我正在尝试配置一个 元素，以便它可以在必要时将长行换行到单词中间，但如果小于的话，也会将元素本身的大小减小到最长行的宽度... 我正在尝试配置一个 <pre> 元素，以便在必要时将长行换行到单词中间，但如果最长行的宽度小于页面宽度，也会将元素本身的大小减小到最长行的宽度。 我已经弄清楚如何做其中一件事情，但我找不到一种方法让它们一起很好地发挥作用。 此用例的用例是我正在尝试为 Web 应用程序构建一个漂亮的错误页面，其中将包含在 <pre> 元素中漂亮打印的原始堆栈跟踪，但我希望它能够正确处理非常长的字符串堆栈跟踪中不包含空格。 为了让中字换行正常工作，我可以使用 CSS 声明 word-break: break-all; 和 white-space: break-spaces; 来实现。另外，我可以使用声明 <pre> 将 width: min-content; 元素本身缩小到线宽。但是，当我将两者应用到同一个 <pre> 块时，它会将块缩小以适合单个字符。 考虑到这些声明应该做什么，这种行为对我来说确实有意义，但如果有另一种方法来实现这一目标，同时满足这两个目标，那么我无法弄清楚它是什么。 有人对我应该使用什么来获得想要的结果有什么建议吗？下面是示例代码。 pre { background-color: silver; border-radius: 1em; padding: 2em; } .wrap { max-width: 3em; white-space: break-spaces; word-break: break-all; } .shrink { width: min-content; } <h3 class="caption">none</h3> <pre>0123456789</pre> <h3 class="caption">wrap</h3> <pre class="wrap">0123456789</pre> <h3 class="caption">shrink</h3> <pre class="shrink">0123456789</pre> <h3 class="caption">both</h3> <pre class="shrink wrap">0123456789</pre> 我只需使用 pre 设置 overflow: auto 元素的样式，并允许用户水平滚动。 pre { overflow: auto; background: lightskyblue; padding: 1em; border-radius: 0.5em; } <h1>Here is a scrollable stack trace</h1> <pre> javax.servlet.ServletException: Something bad happened at com.example.myproject.OpenSessionInViewFilter.doFilter(OpenSessionInViewFilter.java:60) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157) at com.example.myproject.ExceptionHandlerFilter.doFilter(ExceptionHandlerFilter.java:28) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157) at com.example.myproject.OutputBufferFilter.doFilter(OutputBufferFilter.java:33) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157) at org.mortbay.jetty.servlet.ServletHandler.handle(ServletHandler.java:388) at org.mortbay.jetty.security.SecurityHandler.handle(SecurityHandler.java:216) at org.mortbay.jetty.servlet.SessionHandler.handle(SessionHandler.java:182) at org.mortbay.jetty.handler.ContextHandler.handle(ContextHandler.java:765) at org.mortbay.jetty.webapp.WebAppContext.handle(WebAppContext.java:418) at org.mortbay.jetty.handler.HandlerWrapper.handle(HandlerWrapper.java:152) at org.mortbay.jetty.Server.handle(Server.java:326) at org.mortbay.jetty.HttpConnection.handleRequest(HttpConnection.java:542) at org.mortbay.jetty.HttpConnection$RequestHandler.content(HttpConnection.java:943) at org.mortbay.jetty.HttpParser.parseNext(HttpParser.java:756) at org.mortbay.jetty.HttpParser.parseAvailable(HttpParser.java:218) at org.mortbay.jetty.HttpConnection.handle(HttpConnection.java:404) at org.mortbay.jetty.bio.SocketConnector$Connection.run(SocketConnector.java:228) at org.mortbay.thread.QueuedThreadPool$PoolThread.run(QueuedThreadPool.java:582) Caused by: com.example.myproject.MyProjectServletException at com.example.myproject.MyServlet.doPost(MyServlet.java:169) at javax.servlet.http.HttpServlet.service(HttpServlet.java:727) at javax.servlet.http.HttpServlet.service(HttpServlet.java:820) at org.mortbay.jetty.servlet.ServletHolder.handle(ServletHolder.java:511) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1166) at com.example.myproject.OpenSessionInViewFilter.doFilter(OpenSessionInViewFilter.java:30) ... 27 more Caused by: org.hibernate.exception.ConstraintViolationException: could not insert: [com.example.myproject.MyEntity] at org.hibernate.exception.SQLStateConverter.convert(SQLStateConverter.java:96) at org.hibernate.exception.JDBCExceptionHelper.convert(JDBCExceptionHelper.java:66) at org.hibernate.id.insert.AbstractSelectingDelegate.performInsert(AbstractSelectingDelegate.java:64) at org.hibernate.persister.entity.AbstractEntityPersister.insert(AbstractEntityPersister.java:2329) at org.hibernate.persister.entity.AbstractEntityPersister.insert(AbstractEntityPersister.java:2822) at org.hibernate.action.EntityIdentityInsertAction.execute(EntityIdentityInsertAction.java:71) at org.hibernate.engine.ActionQueue.execute(ActionQueue.java:268) at org.hibernate.event.def.AbstractSaveEventListener.performSaveOrReplicate(AbstractSaveEventListener.java:321) at org.hibernate.event.def.AbstractSaveEventListener.performSave(AbstractSaveEventListener.java:204) at org.hibernate.event.def.AbstractSaveEventListener.saveWithGeneratedId(AbstractSaveEventListener.java:130) at org.hibernate.event.def.DefaultSaveOrUpdateEventListener.saveWithGeneratedOrRequestedId(DefaultSaveOrUpdateEventListener.java:210) at org.hibernate.event.def.DefaultSaveEventListener.saveWithGeneratedOrRequestedId(DefaultSaveEventListener.java:56) at org.hibernate.event.def.DefaultSaveOrUpdateEventListener.entityIsTransient(DefaultSaveOrUpdateEventListener.java:195) at org.hibernate.event.def.DefaultSaveEventListener.performSaveOrUpdate(DefaultSaveEventListener.java:50) at org.hibernate.event.def.DefaultSaveOrUpdateEventListener.onSaveOrUpdate(DefaultSaveOrUpdateEventListener.java:93) at org.hibernate.impl.SessionImpl.fireSave(SessionImpl.java:705) at org.hibernate.impl.SessionImpl.save(SessionImpl.java:693) at org.hibernate.impl.SessionImpl.save(SessionImpl.java:689) at sun.reflect.GeneratedMethodAccessor5.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25) at java.lang.reflect.Method.invoke(Method.java:597) at org.hibernate.context.ThreadLocalSessionContext$TransactionProtectionWrapper.invoke(ThreadLocalSessionContext.java:344) at $Proxy19.save(Unknown Source) at com.example.myproject.MyEntityService.save(MyEntityService.java:59) <-- relevant call (see notes below) at com.example.myproject.MyServlet.doPost(MyServlet.java:164) ... 32 more Caused by: java.sql.SQLException: Violation of unique constraint MY_ENTITY_UK_1: duplicate value(s) for column(s) MY_COLUMN in statement [...] at org.hsqldb.jdbc.Util.throwError(Unknown Source) at org.hsqldb.jdbc.jdbcPreparedStatement.executeUpdate(Unknown Source) at com.mchange.v2.c3p0.impl.NewProxyPreparedStatement.executeUpdate(NewProxyPreparedStatement.java:105) at org.hibernate.id.insert.AbstractSelectingDelegate.performInsert(AbstractSelectingDelegate.java:57) ... 54 more </pre>

如何使用引导程序在按钮之间设置间距

我想在按钮之间给出间距，有没有一种方法可以使用引导程序给出间距，以便它们在不同的屏幕分辨率下保持一致。 我尝试使用 margin-left 但这是正确的吗...

如何在输入中添加 SVG 图标？

我需要在输入中放置图标以创建新用户。对于了解前端代码的人来说，这可能是一项非常简单的任务。但我不这么认为。这是线框图和...

我可以有一个包含所有产品详细信息的页面吗？

我有一个产品库页面，每个产品有一张卡片，当我单击其中一张卡片时，我想显示产品详细信息页面。如何将我所有产品的产品详细信息放入一个...

css 作用域，包围 css 文件，因此它仅适用于特定选择器内部

我有一个 CSS 文件 @media（首选颜色方案：深色）{ .w-tc-编辑器{ --color-fg-default: #c9d1d9; --颜色画布-微妙：#161b22； --color-prettylights-syntax-comment: #8b949e; -...

产品展示中的产品描述

我有带有卡片的产品展示页面，当我单击按钮时，我想将其定向到产品描述。现在我想问一下如何将多个产品描述放在一个 html 文件中以及何时具体

从 CSS 网格中删除子项

我有一个设置为 CSS 网格的表单，但我希望提交按钮始终位于表单的右下角。 我见过一些如何强迫孩子进入新行的例子，我

Web 与 Figma 中的字体表现不同

我有两种字体，它们在Figma 和浏览器中的表现不同。注意：我使用相同的字体文件（tusker 是 .otf，helvetica 是 .tff） Dev env 只是一个简单的下一个应用程序（v 13.2.4），...

css'ex'单位的值是多少？

（不要与流行的 .Net 单元测试库 Xunit 混淆。） 今天，在一阵无聊中，我开始检查 Gmail DOM（是的，我很无聊）。 一切看起来都很简单，除非...