css 相关问题

如何保证不同div的元素高度相等？

我有三张不同的卡片，每张都有不同的内容。我想确保这些卡片中的所有元素保持相同的高度，即使内容不同。目标是实现...

CSS 在需要时使用多行省略号垂直对齐文本

我有一个固定大小的容器，我希望在其中显示具有已知字体大小、行高等的可变长度多行文本。 如果文本适合容器：它垂直居中 如果是的话

如何将类添加到 WordPress 主下拉菜单

我想将类名添加到wordpress的主子菜单中。请任何人帮助我做到这一点。提前致谢。 例如这样的菜单结构 我想将类名添加到 WordPress 的主子菜单中。请任何人帮助我做到这一点。预先感谢。 例如这样的菜单结构 <ul id="main-menu"> <li><a href=""> home</a></li> <li><a href="">About us</a> <ul class="sub-menu"> <li><a href="">submenu1</a></li> <li><a href="">submenu2</a></li> <li><a href="">submenu3</a></li> </ul> </li> </ul> 我想在子菜单中添加另一个类ul 这会起作用，只需将此代码添加到您的functions.php function your_submenu_class($menu) { $menu = preg_replace('/ class="sub-menu"/','/ class="sub-menu yourclass" /',$menu); return $menu; } add_filter('wp_nav_menu','your_submenu_class'); 在 'menu_class' 模板中使用 wp_nav_menu() 函数的 .php 参数： <?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'menu_id' => 'primary-menu', 'menu_class' => 'menu primary-menu-top' ) ); ?>

基于引导程序的模板：我做错了什么或可以改进吗？

根本不是网站设计师，我仍在尝试为具有以下要求的网站定义一个像样的起始模板： 固定页眉和页脚 屏幕右侧的导航按钮...

使用样式组件单击时如何从材质图标按钮中删除轮廓边框

我使用了材质图标按钮，但不希望单击按钮时出现轮廓边框。 我尝试了一切，但似乎没有任何效果。是否可以使用样式组件来做到这一点？...

使用异物复选框切换 svg 元素可见性

我正在使用 graphviz 生成的 svg 文件。我的目标是在foreignObject 的顶部添加复选框以切换某些元素的可见性。这是一个最小的示例，其中取消选中

有没有办法根据其父项设置项目的选项？

我需要红色标记的宽度和高度与绿色标记相同。 请注意，红色标记显示在空白处。 我想要红色标记来标记 ri 上的段落...

Elementor 单篇文章 - 图像比文本宽

我正在使用 Elementor Pro。我的博客设计需要图像比单个帖子模板中的文本更宽（例如：文本最大宽度为 840 像素，而图像可以为 1140 像素宽）。不幸的是，帖子编辑

MUI hideBackDrop={true} 不允许我单击 Drawer 组件外部来关闭它

我有一个抽屉组件，当我单击地图上的图标时，该组件会打开。然后抽屉菜单打开，背景阴影落在地图上。当我点击带有背景阴影的地图时，抽屉就会关闭

如何在选项卡内添加下一个/保存按钮以继续下一个选项卡

我是编码新手/菜鸟，我只是想问一下，一旦用户单击“下一步”/“保存”，如何使选项卡继续执行下一个选项卡？是否可以更改完成的选项卡的颜色？对于e...

在 Firefox 和 Safari 的 CSS calc() 中获取百分比？

我使用以下 calc() 方程来计算两个 div 的宽度： CSS 。我的课 { 宽度：计算（（100% - 800px）/ 2）； 宽度：-moz-calc((100% - 800px) / 2); 宽度：-webkit-calc((...

如何在星云菜单项中换行

我正在使用星云菜单，我想知道如果单词超过菜单的长度，我如何打破这条线。我努力了 ::ng-deep .nb-主题-默认 nb-menu .menu-item a { 溢出换行：打破沃...

固定定位 div 中未设置高度时溢出不起作用

我有以下代码，我试图构建一个没有设置高度的模态，但确实有一个最大高度，因此它会根据其内容进行调整，但不会增长到超过特定限制。亲...

如何更改 Storybook Design Token“presenter”中的“font-family”？

我正在使用 Storybook 和 Storybook-design-token 附加组件展示我的设计令牌。对于我的令牌，我需要它们使用“open-sans”字体系列。但我不知道在哪里可以给他们分配这样的道具......

CSS - 转换

HTML \\\\ CSS .buttonFrame { 位置：相对； 宽度：55 像素； 身高... HTML \<div class="buttonFrame"\>\<div class="btn"\>\</div\>\</div\> CSS .buttonFrame { position: relative; width: 55px; height: 20px; border-radius: 12px; border: 2px solid black; overflow: hidden; top: 30%; left: 45%; z-index: 100px; } .btn { border-radius: 12px; width: 0%; height: 0%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100% ); background-position: 0 0; transition: width 2s, height 2s; /* Added height transition */ } .buttonFrame:hover .btn { /* Changed to target .btn on hover of .buttonFrame */ width: 100%; /* Adjusted width for hover effect */ height: 100%; /* Adjusted height for hover effect */ background-position: 0 0; /* transform: scaleX(2); */ } 过渡效果是从左上角核心开始，但需要从左上角开始 我尝试了互联网和人工智能的几种方法，但没有任何效果。基本上我试图使它像一个小的加载栏，当我将鼠标悬停在块上时加载。 正如 A Haworth 在评论中提到的，仅在悬停和过渡时设置 height 会使其从 0 更改为 100%。您可以将其删除并将 height 添加到按钮。 另外，z-index没有计量单位，应该是z-index:100; 保留您的代码： .buttonFrame { position: relative; width: 55px; height: 20px; border-radius: 12px; border: 2px solid black; overflow: hidden; top: 30%; left: 45%; /* z-index: 100px; */ z-index: 100; } .btn { border-radius: 12px; width: 0%; height: 0%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%); background-position: 0 0; /* transition: width 2s, height 2s; */ transition: width 2s; height: 100%; } .buttonFrame:hover .btn { width: 100%; /* height: 100%; */ /* background-position: 0 0; */ } <div class="buttonFrame"> <div class="btn"></div> </div> 请注意，您可以使用 after 用一个元素来制作它。这是仅包含所需属性的片段。 .btn { width: 55px; height: 20px; border: 2px solid black; overflow: hidden; } .btn, .btn:after { border-radius: 12px; } .btn:after { display: block; content: ""; width: 0%; transition: width 2s; height: 100%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%); } .btn:hover:after { width: 100%; } <div class="btn"></div>

尝试用react tsx复制纯CSS堆叠卡，不知道如何继续

我正在尝试重新创建一个我在React tsx组件中用纯CSS制作的组件，但我不知道如何继续。 这是 html/css ，它完全符合我的要求。 我正在尝试重新创建一个我在 React tsx 组件中用纯 CSS 创建的组件，但我不知道如何继续。 这里的 html/css 完全符合我的要求。 <body> <div class="left-content"> <h1>Headings</h1> <p>This section contains the headings and occupies the left 50% of the screen.</p> </div> <div class="container"> <ul id="cards"> <li class="card" id="card1"> <div class="card-body"> <h2>Card 1</h2> </div> </li> <li class="card" id="card2"> <div class="card-body"> <h2>Card 2</h2> </div> </li> <li class="card" id="card3"> <div class="card-body"> <h2>Card 3</h2> </div> </li> <li class="card" id="card4"> <div class="card-body"> <h2>Card 4</h2> </div> </li> </ul> </div> </body> CSS： body { background-color: #2E3537; font-family: 'Poppins', sans-serif; } :root { --cards: 5; --cardHeight: 87vh; --cardTopPadding: 0em; --cardMargin: 4vw; } .container { width: 50%; margin: 0; position: absolute; right: 0; } #cards { list-style: none; padding-left: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(var(--cards), var(--cardHeight)); gap: var(--cardMargin); padding-bottom: calc(var(--cards) * var(--cardTopPadding)); margin-bottom: var(--cardMargin); } .card { position: sticky; top: 0; padding-top: calc(var(--index) * var(--cardTopPadding)); } #card1 .card-body { background-color: #52B2CF; } #card2 .card-body { background-color: #E5A36F; } #card3 .card-body { background-color: #9CADCE; } #card4 .card-body { background-color: #D4AFB9; } .card-body { box-sizing: border-box; padding: 30px; border-radius: 50px; box-shadow: 0 0 30px 0 rgba(0,0,0,0.3); height: var(--cardHeight); display: flex; justify-content: center; align-items: center; transition: all 0.5s; } h2 { font-size: 8em; } .left-content { width: 50%; float: left; padding: 20px; color: white; box-sizing: border-box; position:fixed; } .left-content h1 { font-size: 3em; } .left-content p { font-size: 1.5em; } 这是我对 reatc tsx 组件的尝试： import React, { useEffect, useState } from 'react'; import { styled } from '@mui/system'; import { motion, useAnimation } from 'framer-motion'; import { useInView } from 'react-intersection-observer'; import placeholderImage from './placeholder.png'; // Assume you have a placeholder image import './ThirdSection.css'; const BigRow = styled('div')({ backgroundColor: '#00E186', color: 'white', minHeight: '100vh', display: 'flex', flexDirection: 'row', padding: '0', margin: '0', overflow: 'hidden', }); const TextSection = styled('div')({ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '1', width: '100%', paddingTop: '60px', // Adjust padding to account for the fixed navbar padding: '0', margin: '0', position: 'relative', }); const StackedCardsContainer = styled('div')({ flex: '1 1 60%', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', // overflow: 'hidden', margin: '20px', position: 'relative', }); const Image = styled(motion.img)({ width: '80%', height: '80%', objectFit: 'cover', }); const TextContainer = styled('div')({ flex: '40%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', padding: '2rem', textAlign: 'center', }); const AnimatedText = styled(motion.h1)({ fontSize: '5rem', fontWeight: 'bold', }); const HorizontalLine = styled('hr')({ width: '100%', borderTop: '1px solid white', margin: '2rem 0', }); const AnimatedH5 = styled('h5')({ fontSize: '1.5rem', fontWeight: 'normal', margin: '0rem 0', }); const ThirdSection: React.FC = () => { const [displayText, setDisplayText] = useState(''); const text = ' Subheading goes here.'; const controls = useAnimation(); const [ref, inView] = useInView({ threshold: 0.2, triggerOnce: true, }); useEffect(() => { if (inView) { controls.start('visible'); } }, [controls, inView]); const textVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 2 } }, }; useEffect(() => { let index = 0; const interval = setInterval(() => { setDisplayText((prev) => { if (index < text.length) { return prev + text[index]; } clearInterval(interval); return prev; }); index++; }, 2); return () => clearInterval(interval); }, [text]); return ( <BigRow ref={ref}> <TextSection> <TextContainer> <AnimatedText variants={textVariants} initial="hidden" animate={controls} > Big heading here </AnimatedText> <HorizontalLine /> <AnimatedH5>{displayText}</AnimatedH5> </TextContainer> <StackedCardsContainer> <div className="container"> <ul id="cards"> <li className="card" id="card1"> <div className="card-body"> <h2>Card 1</h2> </div> </li> <li className="card" id="card2"> <div className="card-body"> <h2>Card 2</h2> </div> </li> <li className="card" id="card3"> <div className="card-body"> <h2>Card 3</h2> </div> </li> <li className="card" id="card4"> <div className="card-body"> <h2>Card 4</h2> </div> </li> </ul> </div> </StackedCardsContainer> </TextSection> </BigRow> ); }; export default ThirdSection; 其中 ThirdSection.css 与之前的样式表相同。 主要问题是bigrow父级需要overflow:hidden，否则卡片会溢出到父级中，但overflow:hidden会破坏动画。 部分解决方案是 StackCardsContainer 具有溢出：滚动，但这看起来不太好，因为你有 2 个滚动条，而且 textSection 也没有固定。 关于如何解决这个问题有什么建议吗？任何帮助将不胜感激！ 我对代码做了一些更改，使其工作方式与 html 代码的工作方式相同。希望有帮助。 tsx： const BigRow = styled('div')({ height:'100%', backgroundColor: '#00E186', color: 'white', display: 'flex', flexDirection: 'row', padding: '0', margin: '0', overflow: 'hidden', }); const TextSection = styled('div')({ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '1', width: '100%', paddingTop: '60px', // Adjust padding to account for the fixed navbar padding: '0', margin: '0', position: 'relative', }); const StackedCardsContainer = styled('div')({ flex: '1 1 60%', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow:'auto', height:'100%' }); const Image = styled(motion.img)({ width: '80%', height: '80%', objectFit: 'cover', }); const TextContainer = styled('div')({ flex: '40%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', padding: '2rem', textAlign: 'center', }); const AnimatedText = styled(motion.h1)({ fontSize: '5rem', fontWeight: 'bold', }); const HorizontalLine = styled('hr')({ width: '100%', borderTop: '1px solid white', margin: '2rem 0', }); const AnimatedH5 = styled('h5')({ fontSize: '1.5rem', fontWeight: 'normal', margin: '0rem 0', }); export const ThirdSection: React.FC = () => { const [displayText, setDisplayText] = useState(''); const text = ' Subheading goes here.'; const controls = useAnimation(); const [ref, inView] = useInView({ threshold: 0.2, triggerOnce: true, }); useEffect(() => { if (inView) { controls.start('visible'); } }, [controls, inView]); const textVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 2 } }, }; useEffect(() => { let index = 0; const interval = setInterval(() => { setDisplayText((prev) => { if (index < text.length) { return prev + text[index]; } clearInterval(interval); return prev; }); index++; }, 2); return () => clearInterval(interval); }, [text]); return ( <BigRow ref={ref}> <TextSection> <TextContainer> <AnimatedText variants={textVariants} initial="hidden" animate={controls} > Big heading here </AnimatedText> <HorizontalLine /> <AnimatedH5>{displayText}</AnimatedH5> </TextContainer> <StackedCardsContainer> <div className="container"> <ul id="cards"> <li className="card" id="card1"> <div className="card-body"> <h2>Card 1</h2> </div> </li> <li className="card" id="card2"> <div className="card-body"> <h2>Card 2</h2> </div> </li> <li className="card" id="card3"> <div className="card-body"> <h2>Card 3</h2> </div> </li> <li className="card" id="card4"> <div className="card-body"> <h2>Card 4</h2> </div> </li> </ul> </div> </StackedCardsContainer> </TextSection> </BigRow> ); }; css： html,body,#root,.App{ height: 100%; } body { background-color: #2E3537; font-family: 'Poppins', sans-serif; } :root { --cards: 5; --cardHeight: 87vh; --cardTopPadding: 0em; --cardMargin: 4vw; } .container { width: 50%; margin: 0; position: absolute; right: 0; height: 100vh; padding: 20px; } #cards { list-style: none; padding-left: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(var(--cards), var(--cardHeight)); gap: var(--cardMargin); padding-bottom: calc(var(--cards) * var(--cardTopPadding)); margin-bottom: var(--cardMargin); } .card { position: sticky; top: 0; padding-top: calc(var(--index) * var(--cardTopPadding)); } #card1 .card-body { background-color: #52B2CF; } #card2 .card-body { background-color: #E5A36F; } #card3 .card-body { background-color: #9CADCE; } #card4 .card-body { background-color: #D4AFB9; } .card-body { box-sizing: border-box; padding: 30px; border-radius: 50px; box-shadow: 0 0 30px 0 rgba(0,0,0,0.3); height: var(--cardHeight); display: flex; justify-content: center; align-items: center; transition: all 0.5s; } h2 { font-size: 8em; } .left-content { width: 50%; float: left; padding: 20px; color: white; box-sizing: border-box; position:fixed; } .left-content h1 { font-size: 3em; } .left-content p { font-size: 1.5em; }

更改 AntD 按钮的颜色（背景）

我知道还有其他类似的主题，但我想知道如何使我的情况发挥作用。到目前为止，我还无法利用现有信息使其发挥作用。 我正在尝试修改

Ant Design 选择问题（在选择组件中显示步骤图标）

Ant design 选择问题 我在 React 项目中遇到了 Ant Design Select 组件的问题。具体来说，“选择”下拉列表中意外出现了一个步骤图标，我...

Iframe 调整 CORS 大小

是否可以将我的 tumblr 网站上的 iframe 大小调整为 100%？ 我已经尝试了很多选项，但仅使用 jQuery 我遇到了 CORS 问题，还尝试了以下插件： https://github.com/Sly777/Iframe-Height-Jq...

将边框半径应用于 HTML 表格行时，可以看到额外的背景

我正在使用 HTML 表格，在其中将颜色应用于表格单元格。表格单元格具有边框半径属性。 但是，应用边框半径后可以看到额外的背景。哈...