Questions tagged «css»

我如何在CSS中设置行距，就像我们可以在MS Word中设置行距一样？

145 css  line 

我正在尝试在粉红色的中间放置一个蓝色的容器，但是vertical-align: middle;在这种情况下似乎没有用。 <div style="display: block; position: absolute; left: 50px; top: 50px;"> <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"> <div style="background-color: lightblue;">test</div> </div> </div> 结果： 期望： 请提出我该如何实现。 Jsfiddle

145 html  css  vertical-alignment  absolute 

如何使“ x”在跨度的中间垂直对齐？ .foo { height: 50px; border: solid black 1px; display: inline-block; vertical-align: middle; } <span class="foo"> x </span>

144 html  css 

.offset([coordinates])方法设置元素的坐标，但仅相对于文档。那么如何设置元素的坐标，但相对于父元素呢？ 我发现该.position()方法仅获得相对于父级的“顶部，左侧”值，但未设置任何值。 我尝试过 $("#mydiv").css({top: 200, left: 200}); 但不起作用。

144 jquery  css  jquery-selectors  positioning  css-position 

标签标签没有属性'width'，那么我应该如何控制标签标签的宽度？

144 html  css  label 

我正在阅读这篇题为“您能否使iFrame响应式吗？”的stackoverflow帖子，并且其中一项评论/答案将我引向了jfiddle。 但是，当我尝试实现HTML和CSS以满足自己的需求时，却没有相同的结果/成功。我创建了自己的JS小提琴，因此我可以向您展示它对我来说是如何工作的。我确定它与我使用的iFrame类型有关（例如，产品图片可能也需要响应）。 我主要担心的是，当我的博客读者在iPhone上访问我的博客时，我不希望所有内容都是x宽度（我所有内容的宽度均为100％），然后iFrame行为不佳，并且是唯一更宽的元素（因此会粘住）超越所有其他内容-如果有意义的话？） 无论如何，有人知道为什么它不起作用吗？谢谢。 这是MY JSFIDDLE的HTML和CSS（如果您不想单击链接）： <div class="wrapper"> <div class="h_iframe"> <!-- a transparent image is preferable --> <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" /> <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe> </div> </div> 这是随附的CSS： .wrapper { width: 100%; height: 100%; margin: 0 auto; background: #ffffff; } .h_iframe { position: relative; } .h_iframe …

144 css  iframe  responsive-design 

我创建了一个带有始终可见的上一个和下一个按钮的轮播。这些按钮处于悬停状态，它们变为蓝色。在诸如iPad的触摸设备上，悬停状态为粘滞状态，因此在点击它后按钮保持蓝色。我不要 我可以为每个按钮添加一个no-hover类ontouchend，并使CSS像这样：button:not(.no-hover):hover { background-color: blue; }但这可能会降低性能，并且不能正确处理Chromebook Pixel（具有触摸屏和鼠标）之类的设备。 我可以向中添加一个touch类documentElement，并使CSS像这样：html:not(.touch) button:hover { background-color: blue; }但是，这在同时带有触摸和鼠标的设备上也无法正常工作。 我更希望删除悬停状态ontouchend。但这似乎是不可能的。聚焦另一个元素不会删除悬停状态。手动点击另一个元素可以，但是我似乎无法在JavaScript中触发它。 我发现的所有解决方案似乎都不完美。有没有完美的解决方案？

144 javascript  css  hover  touch 

我正在设计电子应用程序，因此可以访问CSS变量。我在中定义了一个颜色变量vars.css： :root { --color: #f0f0f0; } 我想在中使用此颜色main.css，但应用了一些不透明度： #element { background: (somehow use var(--color) at some opacity); } 我将如何去做？我没有使用任何预处理器，只有CSS。我希望使用全CSS的答案，但是我会接受JavaScript / jQuery。 我无法使用，opacity因为我使用的背景图像应该不透明。

144 css  colors  css-variables 

我正在使用CSS来表示jQuery向下滑动部分的触发文本：即，当您将鼠标悬停在触发文本上时，光标将变为指针，并且触发文本的不透明度降低，以指示该文本具有单击动作。 这在Firefox和Chrome中可以正常工作，但是在IE8中，不透明度不会改变。 我尝试了各种CSS设置，但均未成功。 例如 HTML： <h3 class="slidedownTrigger">This is the trigger text</h3> CSS： .slidedownTrigger { cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -khtml-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; } 是什么阻止IE更改不透明度？注意：我已经在各种不同的元素上进行了尝试，围绕CSS语句的顺序进行交换，并且仅使用IE本身。我也尝试过使用 -ms-filter: "alpha(opacity=75)"; 但没有成功。 我已经用尽所有尝试在IE8中进行不透明度修改的功能。 有任何想法吗？

143 css  internet-explorer-8  opacity 

按照目前的情况，这个问题不适合我们的问答形式。我们希望答案会得到事实，参考或专业知识的支持，但是这个问题可能会引起辩论，争论，民意调查或扩展讨论。如果您认为此问题可以解决并且可以重新提出，请访问帮助中心以获取指导。 7年前关闭。 Firebug是我发现的用于编辑CSS的最方便的工具-为什么CSS没有简单的“保存”选项？ 我总是发现自己在Firebug中进行调整，然后回到我的原始.css文件并复制这些调整。 有谁想出更好的解决方案？ 编辑：我知道代码存储在服务器上（大多数情况下不是我自己的），但是在构建自己的网站时会使用它。 Firebug仅使用从服务器下载的.css文件Firefox，它确切地知道正在编辑哪些文件中的行。我看不到为什么没有“导出”或“保存”选项，该选项允许您存储新的.css文件。（然后我可以将其替换为）。 我尝试查找临时位置，然后选择“ 文件” >“ 保存...”，并尝试在Firefox上使用输出选项，但是我仍然没有找到解决方法。 编辑2： 官方讨论小组有很多问题，但没有答案。

143 css  firebug 

Chrome的用户代理样式表为<select>元素的所有角提供了5px的边框半径。我尝试通过在外部样式表中应用半径为0px以及元素本身的内联来摆脱这种情况；我已经尝试了两者border-radius:0px，-webkit-border-radius:0px;并且尝试了更具体的方法border-top-left-radius:0px（以及-webkit等效项）。 没有任何工作。 当我检查webkit开发人员工具中的元素时，“计算样式”仍将半径列为5px。但是，如果我单击它旁边的扩展器箭头以查看详细信息，它将显示为：element.style-0px。在其下方，它显示了我给出的外部CSS规范（0px）以及用户代理样式表规范（5px）。后两者都应该删除。 有任何想法吗？

143 select  webkit  css 

我有3个级别div： （下面的绿色）div带有的顶层overflow: hidden。这是因为我希望如果该框内的某些内容（此处未显示）超出框的大小，则会对其进行裁剪。 （在下面红色）这里面，我也div有position: relative。唯一的用途是用于下一个级别。 （下面的蓝色）最后，div我从流程中取出，position: absolute但要相对于红色div（而不是页面）进行定位。 我希望将蓝色框从流程中移出并扩展到绿色框之外，但要相对于红色框定位，如下所示： 但是，使用下面的代码，我得到： 并移除position: relative红色框上的，现在允许蓝色框脱离绿色框，但不再相对于红色框定位： 有没有办法： 将保持overflow: hidden在绿色框上。 蓝色框是否已超出绿色框并相对于红色框定位？ 完整资料： #d1 { overflow: hidden; background: #efe; padding: 5px; width: 125px; } #d2 { position: relative; background: #fee; padding: 2px; width: 100px; height: 100px; } #d3 { position: absolute; top: 10px; background: #eef; padding: 2px; …

143 css  overflow  css-position 

在每个列表元素之后插入小图像的最佳方法是什么？我尝试了一个伪类，但是有些不对劲... ul li a:after {display: block; width: 3px; height: 5px; background: url ('../images/small_triangle.png') transparent no-repeat;} 谢谢你的帮助！

143 css 

我想要的是绿色背景位于文本的后面，而不是页面宽度的100％。这是我当前的代码： h1 { text-align: center; background-color: green; } <h1>The Last Will and Testament of Eric Jones</h1> 运行代码段隐藏结果展开摘要

143 html  css 

我搜索了其他问题，尽管这个问题似乎与其他几个问题相似，但到目前为止，我所看到的任何问题似乎都无法解决我遇到的问题。 我有一个div，其中包含许多其他div，每个div都向左浮动。这些div分别包含照片和标题。我要的是使照片组位于包含div的中心。 从下面的代码中可以看到，我尝试了在父div上同时使用overflow:hidden和margin:x auto，并且还在clear:both照片后添加了（如另一个主题中所述）。似乎没有什么改变。 谢谢。我感谢任何建议。 <div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;"> <h4>Section Header</h4> <div style="margin: 2em auto;"> <div style="float: left; margin: auto 1.5em;"> <img src="photo1.jpg" /><br /> Photo Caption </div> <div style="float: left; margin: auto 1.5em;"> <img src="photo2.jpg" /><br /> Photo Caption </div> <div style="float: left; …

142 html  center  css