css 相关问题

CSS（层叠样式表）是一种表示样式表语言，用于描述HTML（超文本标记语言），XML（可扩展标记语言）文档和SVG元素的外观和格式，包括（但不限于）颜色，布局，字体和动画。它还描述了元素应如何在屏幕上，纸上，语音或其他媒体上呈现。

我在网格中渲染了几张卡片，最大尺寸为： 4 列 x 行，卡片的高度是可变的，具体取决于卡片内的内容。有没有一种简单的方法可以确保所有卡都...

javascript css reactjs

回答 1 投票 0

我有：我有： <div @onfocusout="@((e) => HidedicList(e))"> <input for="toggleVendors" class="form-control label-toggle" placeholder="Vendor Information" @onchange="selectedValue" @onfocus="@((e) => ShowdicList(e))" /> <input type="checkbox" id="toggleVendors" class="hidden-checkbox" > <div id="diclist" class="@showhide"> <ul> @foreach (var item in (Dictionary<int,string>)this.selectListItems.Items) { <li><input type="checkbox" id="@item.Key" @onchange="@((e) => CheckboxChanged(e, @item.Key))" value="@item.Value" /> @item.Value</li> } </ul> </div> </div> 我正在尝试“滚动我自己的”下拉菜单（有充分的理由为什么我不能使用现有的方法，例如带有选项的数据列表），当焦点在整个 div 上丢失时，一切似乎都可以接受，我想关闭内部 div 。因此，我单击输入框，内部 div 显示我的项目。一旦我开始尝试选择列表中的一个复选框，onfocusout 事件就会在我的外部 div 上触发。如果我将事件移动到内部 div，它不会立即触发事件，但在我选择列表中的复选框后它仍然会触发。首先，不知道为什么，但在这种情况下箭头功能对我不起作用。尝试去做其次，据我所知 onfocusout 不适用于 div，有一个 hack 可以定义 tabIndex 使其工作：

css blazor

回答 1 投票 0

CSS `filter`：通过覆盖白色将图像淡入白色

CSS 过滤器属性具有许多过滤功能。我正在寻找“洗掉”我正在应用的图像，就好像我在图像顶部覆盖了一个纯白色层并且

css css-filters

回答 1 投票 0

风格 mui 自动完成

我继承了一个带有material ui的项目，以前从未使用过。我的代码中有以下内容我继承了一个带有material ui的项目，我以前从未使用过它。我的代码中有以下内容 <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > {label} </InputLabel> <Input className={className} id={id} value={value} onChange={(e) => { onChange(e.target.value) }} /> </FormControl> 这在任何地方都有效，标签缩小并且样式应用正确。当我检查代码时，我看到下划线的样式使用 :before 和 :after 伪类我需要将相同的内容应用于自动完成，即使用谷歌地点来自动完成位置。如果这很重要的话，我正在使用的库是react-google-autocomplete 我已经尝试过（在一万亿种其他事情中） const {ref} = usePlacesWidget({ apiKey: process.env.REACT_APP_API_KEY, onPlaceSelected: (place) => { console.log(place); }, }); return ( <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > {label} </InputLabel> <Autocomplete ref={ref} id={id} className={className} placeholder="" renderInput={(params) => ( <Input {...params} InputProps={{ ...params.InputProps, className: {className} }} /> )} /> </FormControl> ); 标签有样式但不收缩。我什至尝试添加 InputLabelProps={{ shrink: true, ...props.InputLabelProps, }} 无济于事。文本字段应用了大小及其文本内容（字体）的样式 - 没有伪类，并且使用默认的轮廓样式进行概述。我想知道如何使用已传递的类名复制其余文本字段的外观，如问题中的第一个代码片段所示。非常感谢你另一方面，做 const {ref} = usePlacesWidget({ apiKey: process.env.REACT_APP_API_KEY, onPlaceSelected: (place) => { console.log(place); }, }); return ( <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > {label} </InputLabel> <Input ref={ref} id={id} className={className} /> </FormControl> ); 组件确实得到了样式，但搜索甚至没有执行（我认为这是预期的，但以某种方式让它工作会很好）如果没有提供的代码沙箱，很难说，但是阅读文档，问题可能在于不将引用转发到自定义输入组件： https://mui.com/material-ui/react-autocomplete/#custom-input 他们在示例中总是使用 TextField。并且react-google-autocomplete文档没有按照您尝试的方式使用它的示例https://github.com/ErrorPro/react-google-autocomplete/blob/HEAD/docs/examples.js，据我所知告诉。

css material-ui google-api autocomplete

回答 1 投票 0

CSS - 悬停时从左到右动画文本装饰线[重复]

我不是 CSS 爱好者，所以我需要一些帮助来实现我的目标。我需要当我的元素或弹出菜单显示时，当菜单声音悬停时，从左到右的文本中将出现一行

html css elementor

回答 1 投票 0

如何通过调整屏幕大小使文本框和按钮的左边距始终相同

如何通过调整屏幕大小使课本和按钮的左边距始终相同？这是我的 CSS 代码： .忘记密码文本框{ 字体大小：@textbox-font-size；边框半径：@textbox-border-ra...

html css less

回答 1 投票 0

JavaScript 无法与独立文件中的 HTML 配合，它们在同一个 HTML 文件中工作

所以我做了这个简单的点击按钮的游戏，计时器设置为 5 秒，每次点击计数器都会增加（一切都在同一个文件 [index.html] 中运行）。每当我尝试将代码放入

javascript html css

回答 1 投票 0

HTML Textarea 样式滚动条角边框

我正在尝试在我的网站的深色模式下设置文本区域大小调整器的样式，以便它不是深色网站中的白色块。因此，我尝试同时使用 ::-webkit-scrollbar-corner 和 ::-

html css webkit textarea scrollbar

回答 2 投票 0

我的下拉菜单占用了 100vw，但在窗口右侧创建了水平溢出

我正在开发一个自定义导航栏。菜单无法正确打开。它有 100vw，但转到窗口右侧会创建水平滚动。我有 2 个组件导航栏和菜单。菜单

javascript html css reactjs

回答 1 投票 0

为什么溢出滚动在大屏幕上不起作用？

我正在开发一个 Vue 项目，我有这个 HTML：我正在开发一个 Vue 项目，我有这个 HTML： <div class="flex flex-col md:flex-row"> <div class="m-6 ml-10 mr-5 mt-10"> <div class="text-left"> <input type="text" class="mb-6 h-10 w-full rounded-lg border-2 border-gray-300 p-2" placeholder="Search for workouts, profiles, etc." /> </div> <div class=" "> <div class="mb-3 text-left"> <p>Explore workouts</p> </div> <div class="flex h-28 flex-row gap-3 overflow-x-auto whitespace-nowrap"> <div class="box inline-flex min-w-52 bg-black"></div> <div class="box inline-block min-w-52 bg-black"></div> <div class="box min-w-52 bg-black"></div> <div class="box min-w-52 bg-black"></div> <div class="box min-w-52 bg-black"></div> <div class="box min-w-52 bg-black"></div> <div class="box mb-5 min-w-52 bg-black"></div> </div> </div> </div> </div> 我为此使用顺风。问题是我的 overflow-x-auto 在大屏幕尺寸上不起作用，但当我最小化屏幕时它可以工作。在大屏幕上，它滚动到一个空白区域。将在下面添加一张照片，说明它在大屏幕和小屏幕上的样子。我尝试使用相对定位，但没有成功。大屏幕上：小屏幕上：更换你的div： <div class="flex flex-col md:flex-row"> 这样： <div class="flex flex-col"> 现在似乎正在按预期工作。 https://play.tailwindcss.com

html css frontend tailwind-css overflow

回答 1 投票 0

如何在CSS中给出背景图像路径？

我的 CSS 文件位于：项目/Web/Support/Styles/file.css 我的图片位于：项目/Web/images/image.png 我想要在我的 CSS 文件中使用此图像。我努力了： 1) 背景图片: url(/images/image.png);...

html css

回答 6 投票 0

CSS 网格模板 rowStart 和 rowEnd 行为

我正在使用 TailwindCSS 来制作一些基于网格的布局。我有一个有 100 行和 100 列的网格（扩展了默认的顺风配置）从Tailwind Play中可以看到，最后一个网格的h...

html css tailwind-css css-grid

回答 1 投票 0

如何使 div 位于水平对齐（居中）元素的右侧。在 Tailwind 或 CSS 中

如何使其准确：- 上面有一个 div 在中心对齐，然后另一个 div 在它旁边。 div 的宽度随着动画和按钮的变化而变化。 <question vote="1"> <p>如何使其准确：- <a href="https://i.sstatic.net/Jf1l6Ew2.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvSmYxbDZFdzIucG5n" alt="enter image description here"/></a></p> <p>在上面有一个div在中心对齐，然后另一个div在它旁边。 div 的宽度随着动画和按钮的变化而变化。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code><script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="flex justify-center">  <div class=" bg-blue-300 grow"></div>  <div class="py-10 bg-yellow-300">Center Me</div>  <div class=" bg-blue-300 grow"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>在 <pre><code>absolute</code></pre> 容器内使用 <pre><code>relative</code></pre> 的最佳方式是使用它，因为您有将元素推入其中的内容，或者您可以使用网格代替 <pre><code>flex</code></pre> 来按内容</p> <p>使用flex的解决方案： </p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code> <script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="flex justify-between relative">  <div class="bg-blue-300 grow"></div>  <div class="py-10 bg-yellow-300">Center Me</div> <div class="bg-blue-300 grow"></div>  <div class="bg-blue-300 absolute right-0 h-full"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> <p>使用网格</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code> <script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="grid grid-cols-3">  <div class="bg-blue-300"></div>  <div class="py-10 bg-yellow-300">Center Me</div>  <div class="bg-blue-300"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> <p>最终取决于你如何处理这个问题</p> </answer> </body></html>

html css sass flexbox tailwind-css

回答 0 投票 0

VSC 中 HTML/CSS 代码中的默认空格

在此 HTML 元素中：“Visual Studio Code 在 : 和 l 之间插入默认的空格。如何更改默认设置，以便它不在冒号后插入此空白，而是插入默认空白

html css whitespace

回答 1 投票 0

在 iOS Safari 上，获取键盘大小或键盘上方浮动按钮的响应速度更快的方法是什么？

我正在使用 window.visualViewport.height（视图的可见高度）来计算 iOS Safari 中虚拟键盘的起始位置。一旦我有了 window.visualVie，我就可以让它工作并响应...

javascript html css mobile-safari virtual-keyboard

回答 1 投票 0

内容溢出和滚动造成圆角问题

我正在尝试创建卡片布局。这是我的布局。我正在尝试创建卡片布局。这是我的布局。 <div style={{ display: "flex", flexDirection: "column", alignItems: "start", width: "100%", height: "auto", padding: "2rem", gap: "1rem", borderRadius: "2rem", backdropFilter: "blur(4rem)", background: "goldenrod", }}> <div className="text-3xl unselectable font-bold" style={{display: "flex", flexDirection: "row",alignItems: "center",width: "100%", height: "3rem", }}> <div style={{ width: "auto", height: "3rem", alignItems: "center", display: "flex" }}> <Meteor weight="fill" color="#f2f2f2" /> { /* Phosphor Icons */} </div> <div style={{ width: "0.5rem", height: "100%" }}></div> Technologies and Mastery </div> <div className="card-container-grid-2"> <div className="card">Hello</div> <div className="card">Hello</div> <div className="card">Hello</div> <div className="card">Hello</div> <div className="card">Hello</div> <div className="card">Hello</div> <div className="card">Hello</div> <div className="card">Hello</div> </div> </div> 使用这种风格， .card-container-grid-2 { padding: 1rem; gap: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3), 1fr)); grid-auto-rows: 12rem; width: 100%; height: 100%; } .card { display: flex; flex-direction: column; background: #f2f2f2; border-radius: 0.5rem; } 卡片渲染得很好。但是容器在Y轴上有溢出，并且它在左下角和右下角打破了圆角。尝试控制滚动溢出，但滚动条不可滚动并且圆角仍然尖锐。我怎样才能解决这个问题？有什么建议吗？在父 div 中使用 box-sizing: border-box;

html css

回答 1 投票 0

未指定默认引擎且未提供扩展名，终端会抛出错误

我正在尝试在nodejs中执行后端程序，并且我正在使用mongodb。我正在创建一个表单，其中只有2个输入字段，其中有密码和名称。我没有使用任何 hbs 或 ejs，并且没有默认值

javascript html css node.js mongodb

回答 1 投票 0

Chrome 和 Safari 之间 React 组件的不同网格行为

我目前正在尝试实现一个基于shadcn的Timeline React组件。该组件是社区贡献的组件，我承认它只是从 GitHub 复制粘贴的。我只是测试...

css reactjs astrojs shadcnui

回答 1 投票 0

基于父div居中子div

我有一个父div和一个子div。例如，我想知道是否可以将子div的宽度和高度表示为父div的百分比我有一个父 div 和一个子 div。例如，我想知道是否可以将子 div 的宽度和高度表示为父 div 的百分比 <!doctype html> <head> <meta charset='utf-8' /> <title>Horizontal center a div</title> <style type='text/css'> .one{ width:800px; height:100px; background-color:grey; } .two{ margin-top:30px; margin-bottom:30px; min-height:40px; margin-left:30px; width:90px; background-color:pink; display:inline-block; } </style> </head> <body> <div class="one"> <div class="two">lorem ipsum</p> </div> </body> </html> 查看实际效果 http://jsfiddle.net/thiswolf/3qRgH/ 外部div（父级）有一个height of 100px，我的子div有一个height of 40px。我想将我的孩子放在父主题内居中，所以，100px - 40px = 60px，我将60px划分两次并分配子div margin-top:30px 和 margin-bottom:30px;。但是，我想以百分比形式表示边距。我如何以 % 表示边距。您可以通过这种方式将 div 居中（已编辑）： <!doctype html> <head> <meta charset='utf-8' /> <title>Horizontal center a div</title> <style type='text/css'> .one{ width: 800px; background-color: grey; } .two{ min-height: 40px; margin: 30% 355px; width: 90px; background-color: pink; display: inline-block; } </style> </head> <body> <div class="one"> <div class="two">lorem ipsum</div> </div> </body> </html> 参见http://jsfiddle.net/3qRgH/2/ 你问的是这个吗？ http://jsfiddle.net/thiswolf/5AZJD/ 这似乎有效，但我还没有证明它 <!doctype html> <head> <meta charset='utf-8' /> <title>Horizontal center a div</title> <style type='text/css'> .one{ position:relative; width:800px; height:100px; background-color:grey; } .two{ position:absolute; top:30%; bottom:30%; min-height:40px; margin-left:30px; width:90px; background-color:pink; display:inline-block; } </style> </head> <body> <div class="one"> <div class="two">lorem ipsum</p> </div> </body> </html> .parent { background: gray; height: 300px; width: 300px; position: relative; } .child { background: orange; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; } <div class="parent"> <div class="child"></div> </div> 到目前为止，我还没有找到一种通过仅自定义父级来使子级div居中的方法

css

回答 3 投票 0

按钮在手机屏幕上点击后保持：悬停效果

我有一个滚动到顶部按钮，当它在移动屏幕上单击时，它会保留我为其悬停效果设置的颜色，并且不会返回到原始颜色。＃回到顶部 { 背景：...

javascript html css

回答 3 投票 0

css 相关问题

最新问题