css 相关问题

在 Chrome 中恢复输入类型=数字微调器

我有一个应用程序，其主题基于Metro UI CSS，它隐藏了Chrome在使用时添加的（我认为）漂亮且有用的旋转器。 我正在尝试“覆盖”这个...

透明按钮旁边的小超链接线，上面覆盖有图像

我注意到在创建按钮后出现了一条小线，因此当您单击社交媒体徽标时，它会转到我在该平台上拥有的特定徽标的社交媒体。我想知道如何...

CSS Flexbox 水平对齐 1 个项目，垂直对齐 2 个项目

我有以下 HTML： ... 这里是标题 &... 我有以下 HTML： <div class="icon-box"> <div class="icon"> <svg>...</svg> </div> <h3>Title here</h3> <p>Lorem ipsum dolor...</p> </div> 我的CSS： .icon-box { display: flex; } 结果： 如何在不更改 HTML 的情况下使用 Flexbox 获得以下内容： 我试图在同一列上将图标向左对齐，将标题和段落向右对齐。无需更改/添加新的 HTML。 尝试在主要父级上使用 flex-direction: column;，并在父级的子级上使用常规 display: flex; (flex-direction: row;)。 .icon-box { display: flex; flex-direction: column; justify-content: center; align-items: center; } .icon { display: flex; gap: 10px; } <div class="icon-box"> <div class="icon"> <img src="https://dummyimage.com/50/000000/f2009d&text=SVG"> <h3>Title here</h3> </div> <p>Lorem ipsum dolor...</p> </div> 使用 flexbox 水平和垂直居中，不要忘记设置 height 属性。 .center { display: flex; justify-content: center; align-items: center; height: 200px; border: 3px solid green; }

为什么我的水波动画页脚在 HTML CSS 中不起作用？

我在 YouTube 上偶然发现了这个水波动画页脚，目前我自己正在开发一个项目，所以我决定将页脚实现到我自己的项目中。问题是这不是问题...

CSS 布局帮助 - 多行地址

我正在尝试在页面页脚中显示右对齐的地址，如下所示： 主街东南 1234 号 无处可寻，ID 45445 (555) 555-5555 在我的标记中我有这个： ... 我正在尝试在页面页脚中显示右对齐的地址，如下所示： 主街东南1234号 无处可寻，ID 45445 (555) 555-5555 在我的标记中我有这个： 主街东南 1234 号 无处，ID 45445 (555) 555-5555 如何在不使用 css 在每行中插入 的情况下正确布局？ 嘿尝试使用这个使用这个 .address { white-space:pre; text-align:right; } 您必须在其中添加额外的元素，要么按照您的建议添加<br>，要么像以下内容： <address> <div class="street">1234 south east Main St.</div> <div class="state">Nowhere, Id 45445</div> <div class="telnum">(555) 555-5555</div> </address> 在这种情况下，实际上，.address 不会改变 html 代码的布局，但 pre 元素可以提供帮助。例如 address { white-space:pre; text-align: left; } 首先，在这种情况下，为地址提供一个 id 是一个很好的做法。当然，如果你不再使用其他地址，那就没有必要了。然后： address#company_address { white-space: pre; text-align: right; }

Iframe 在主体内保持滚动

我在模式中有一个 Iframe。我无法为 Iframe 设置固定高度，因为其中的不同页面具有不同的高度。如果我将高度设置为 100%，我的 iframe 高度为 150px，并且我有...

注释框与文本对齐

我正在使用XLST转换为html，有一个部分我希望评论框与文本在同一行对齐。我附上了一张我的目标的图片......

JQuery 脚本可在鼠标移动时围绕圆的边框移动元素

我就快到了 - 想要创建一个小圆圈，在鼠标移动时围绕大圆圈的边界移动。我有以下内容，但小圆圈不在范围内...

根据 href 设计链接

我的网站上有一个我想要设置样式的第三方链接。但它没有任何我可以定位的类或 ID。它唯一拥有的是它独特的 href 值。 是否可以设置锚标记的样式...

CSS：根据其 href 来设置链接样式

我的网站上有一个我想要设置样式的第三方链接。但它没有任何我可以定位的类或 ID。它唯一拥有的是它独特的 href 值。 是否可以设置锚标记的样式...

Eclipse Web 应用程序项目。引入的 CSS 属性不起作用

我创建了一个新的Web应用程序项目。但是，如果我编辑 war/Sandbox_Project.css，则 localhost:8080/Sandbox_Project 网页不会受到影响。例如，如果我添加一个新的属性主体和一些值，那么...

如何通过CSS在UL/LI html列表中设置项目符号颜色，而不使用任何图像或span标签[重复]

想象一个简单的未排序列表，其中包含一些 项目。现在，我通过 list-style:square; 将项目符号定义为方形。但是，如果我用 color 设置 项目的颜色... 想象一个简单的未排序列表，其中包含一些 <li> 项目。现在，我已经通过 list-style:square; 将项目符号定义为方形，但是，如果我使用 <li> 设置 color: #F00; 项目的颜色，那么 所有 都会变成红色！ 虽然我只想设置方形项目符号的颜色。有没有一种优雅的方式来定义CSS中项目符号的颜色... ...不使用任何精灵图像或跨度标签！ HTML <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> CSS li{ list-style:square; } 最常见的方法是这样做： ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 1em; text-indent: -.7em; } li::before { content: "• "; color: red; /* or whatever color you prefer */ } <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> JSFiddle：http://jsfiddle.net/leaverou/ytH5P/ 适用于所有浏览器，包括 IE 8 及更高版本。 前段时间浏览，发现了这个网站，你尝试过这个替代方案吗？ li{ list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg=="); } 听起来很难，但你可以制作自己的 png 图像/图案这里，然后复制/粘贴你的代码并自定义你的项目符号 =) 仍然很优雅？ 编辑： 遵循@lea-verou在另一个答案上的想法并应用这种外部源增强的哲学，我得出了另一个解决方案： 将 Webfont 图标库的样式表嵌入您的头脑中，在本例中为 Font Awesome： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 从 FontAwesome cheatsheet（或任何其他网络字体图标）获取代码。 i.e.: fa-angle-right [&#xf105;] 并使用 f... 的最后一部分，后跟这样的数字，也带有 font-family： li:before { content: "\f105"; font-family: FontAwesome; color: red; /* or whatever color you prefer */ margin-right: 4px; } 就是这样！现在您也有了自定义项目符号提示 =) 小提琴 我只是这样解决这个问题，它应该适用于所有浏览器： ul li { color: red } ul li span { color: blue; } <ul> <li><span>Foo</span></li> <li><span>Bar</span></li> <li><span>Bat</span></li> </ul> CSS 3 Lists 模块的当前规范确实指定了 ::marker 伪元素 可以完全满足您的需求； FF已测试 不支持 ::marker，我怀疑 Safari 或 Opera 是否有它。 IE当然不支持。 所以现在，唯一的方法是使用带有 list-style-image 的图像。 我想你可以用 li 包裹 span 的内容，然后你可以设置每个的颜色，但这对我来说似乎有点老套。 一种方法是将 li:before 与 content: "" 一起使用，并将其样式设置为 inline-block 元素。 这是一个工作代码片段： ul { list-style-type: none; /* no default bullets */ } ul li { font-family: Arial; font-size: 18px; } ul li:before { /* the custom styled bullets */ background-color: #14CCBB; border-radius: 50%; content: ""; display: inline-block; margin-right: 10px; margin-bottom: 2px; height: 10px; width: 10px; } <ul> <li>Swollen joints</li> <li>Pain in hands and knees</li> <li>Redness around joints</li> <li>Constant fatigue</li> <li>Morning stiffness in joints</li> <li>High fevers</li> <li>Rheumatoid nodules, which develop around joints</li> </ul> 然而，另一种解决方案是使用带有 :before 的 border-radius: 50% 伪元素。这适用于所有浏览器，包括 IE 8 及更高版本。 使用 em 单元可以响应字体大小的变化。您可以通过调整 jsFiddle 窗口的大小来测试这一点。 ul { list-style: none; line-height: 1em; font-size: 3vw; } ul li:before { content: ""; line-height: 1em; width: .5em; height: .5em; background-color: red; float: left; margin: .25em .25em 0; border-radius: 50%; } <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> jsFiddle 您甚至可以使用 box-shadow 创建一些漂亮的阴影，而使用 content: "• " 解决方案看起来不太好。 我尝试过这个，但事情对我来说变得很奇怪。 （在本教程的 :after {content: "";} 部分之后，CSS 停止工作。我发现您只需在 color:#ddd; 项目本身上使用 li 即可为项目符号着色。 这是一个示例。 li{ color:#ff0000; list-style:square; } a { text-decoration: none; color:#00ff00; } a:hover { background-color: #ddd; } 我为此使用 jQuery： jQuery('li').wrapInner('<span class="li_content" />'); & 一些 CSS： li { color: red; } li span.li_content { color: black; } 可能有些过分，但如果您正在为 CMS 编码并且不想要求编辑在每个列表项中添加额外的跨度，那么这会很方便。 我建议给LI一个background-image和padding-left。 list-style-image属性在跨浏览器环境中很不稳定，并且添加额外的元素（例如跨度）是不必要的。 所以你的代码最终会看起来像这样： li { background:url(../images/bullet.png) 0 0 no-repeat; list-style:none; padding-left:10px; } 您可以做的最简单的事情是将<li>的内容包装在<span>或等效物中，然后您可以独立设置颜色。 或者，您可以使用所需的项目符号颜色制作图像，并使用 list-style-image 属性进行设置。 在多行条目中具有完美缩进的Lea Verou解决方案的变体可能是这样的： ul{ list-style: none; position: relative; padding: 0; margin: 0; } li{ padding-left: 1.5em; } li:before { position: absolute; content: "•"; color: red; left: 0; } 我知道这篇文章的答案有点晚了，但仅供参考...... CSS ul { color: red; } li { color: black; } 项目符号颜色在 ul 标签上定义，然后我们将 li 颜色切换回来。 我正在添加我的解决方案来解决这个问题。 我不想使用图像，验证器会因为你在 CSS 中使用负值而惩罚你，所以我这样做： ul { list-style:none; padding:0; margin:0; } li { padding-left:0.75em; position:relative; } li:before { content:"•"; color:#e60000; position:absolute; left:0em; } 以 Lea 的演示为例，这是制作带边框的无序列表的不同方法：http://jsfiddle.net/vX4K8/7/ HTML <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <ul> <li>Son</li> <li>Of</li> <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> </ul> </ul> </ul> CSS ul { list-style: none; margin: 0; } ul:first-child { padding: 0; } li { line-height: 180%; border-bottom: 1px dashed #CCC; margin-left: 14px; text-indent: -14px; } li:last-child { border: none; } li:before { content: ""; border-left: 4px solid #CCC; padding-left: 10px; } Lea Verous 解决方案很好，但我想更好地控制子弹的位置，所以这是我的方法： .entry ul { list-style: none; padding: 0; margin: 0; /* hide overflow in the case of floating elements around ... */ overflow: hidden; } .entry li { position: relative; padding-left: 24px; } .entry li:before { /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */ position: absolute; content: "• "; color: #E94E24; font-size: 30px; left: 0; /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ font-family: Arial, sans-serif; } 这样就可以了.. li{ color: #fff; }

过渡效果是从左上角开始，但需要从左上角开始

过渡效果是从左上角开始，但需要从左上角开始 基本上我试图使它像一个小的加载栏，当我将鼠标悬停在块上时加载。 .

当屏幕在反应js中处于活动状态时，导航栏屏幕名称和边框底部会发生变化

我想要这样 导航栏.js 我想要这样的 NavBar.js <div className="icon-tab"> <Link className='icon-name nav-link' to="/Feed"> <div className=''> <img src="https://cdn-icons-png.flaticon.com/128/1176/1176875.png" alt='FEED TAB' className='icon' width={27} height={27} /> <div className='icon-name'>FEED</div> </div> </Link> </div> 应用程序.css .icon-tab { justify-content: center; align-items: center; display: flex; width: 90px; margin-left: 30px; text-align: center; } .icon-tab:active{ border-bottom: 2px solid #0275b1; } .icon-name { font-weight: bold; text-decoration: none; color: #000; } .icon-name:active { font-weight: bold; color: #0275B1; } 当主活动屏幕为主屏幕时，主屏幕永远不会出现条形图标，并且主屏幕标题颜色将发生变化，并且当屏幕打开（活动）时，底部边框也会出现 我正在尝试这样做，但它不起作用，当我的鼠标单击图标和附近的栏标题时，它的颜色会发生变化，但我的输出会像这样，但在我的鼠标落下后，颜色将保持变化。 当我的主屏幕打开时，如何执行此操作，然后我的主屏幕从不栏标题颜色更改，当我的另一个屏幕打开时，主屏幕从不栏标题颜色默认为黑色。 使用导航栏代替链接： <NavLink className={'icon-name nav-link'} to="/Feed" > <div className="icon-tab"> <div className=''> <img src="https://cdn-icons-png.flaticon.com/128/1176/1176875.png" alt='FEED TAB' className='icon' width={27} height={27} /> <div className={`icon-name`}>FEED</div> </div> </div> </NavLink> 在上面的代码中，当 NavLink 处于活动状态时，链接获取 active class 并将 css 更改为： .icon-name { font-weight: bold; text-decoration: none; color: #000; } .icon-name.active , .icon-name.active .icon-name { font-weight: bold; color: #0275B1; } .icon-name .icon-tab { justify-content: center; align-items: center; display: flex; width: 90px; margin-left: 30px; text-align: center; } .icon-name.active .icon-tab{ border-bottom: 2px solid #0275b1; } 你是这个意思吗？

更改边框宽度时如何防止移位

这是一把小提琴。 http://jsfiddle.net/86juF/1/ 如何防止元素在点击时出现移动？ 这些元素通常具有 1 像素边框，但单击时会变为 2 像素边框。 在...

创建一条中间有圆圈的线

所以，我正在努力实现这个结果： 这是我尝试时得到的结果：https://jsfiddle.net/wvdkmjge/ 。容器 { 宽度：100px； 高度：1px； 背景颜色：黑色； } 。圆圈 {

覆盖外部 props 的样式

我在 React 中覆盖外部组件的样式时遇到问题。我有一个基本组件徽章，它拥有较少的样式，但有时我需要从外部组件应用一些样式...

覆盖外部道具的样式：。 （CSS 模块、React、LESS）

我在 React 中覆盖外部组件的样式时遇到问题。 例如，我有基本的组件徽章，它拥有较少的样式，但有时我需要从外部组件应用一些样式...

如何使span的内容框大小等于其父级的内容框大小？

我需要span1的内容框的大小等于span2的内容框的大小 - 这样我就可以沿着页面移动红色标记，而不必每次都重新更改宽度和高度...

将标题动画延迟到视口中

我在一个页面中有多个标题，我想将其动画化以逐字显示。 当它们出现在视口中时，如何实现单独的标题动画？现在他们都是动画...