Questions tagged «css»

给定以下标记，我该如何使用CSS强制一个单元格（列中的所有单元格）适应其中内容的宽度，而不是拉伸（这是默认行为）？ <style type="text/css"> td.block { border: 1px solid black; } </style> <table style="width: 100%;"> <tr> <td class="block">this should stretch</td> <td class="block">this should stretch</td> <td class="block">this should be the content width</td> </tr> </table> 编辑：我知道我可以对宽度进行硬编码，但是我不愿意这样做，因为该列中的内容是动态的。 看下面的图像，第一张图像是标记生成的图像。第二张图片是我想要的。

265 html  css  html-table 

我可以在CSS参考中看到如何设置图像透明度以及如何设置背景图像。但是，如何将这两者结合以设置透明的背景图像？ 我有一张要用作背景的图像，但是它太亮了-我想将不透明度降低到约0.2。我怎样才能做到这一点？ #main { background-image: url(/wp-content/uploads/2010/11/tandem.jpg); }

264 css 

<a>由于某种原因，我必须将图标包装在标签中。 有什么可能的方法可以将超棒字体图标的颜色更改为黑色？ 还是只要包裹在<a>标签中就不可能吗？真棒字体应该是字体而不是图像，对不对？ <a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

264 html  css  font-awesome 

我有一个父组件： <parent></parent> 我想用子组件填充该组： <parent> <child></child> <child></child> <child></child> </parent> 父模板： <div class="parent"> <!-- Children goes here --> <ng-content></ng-content> </div> 子模板： <div class="child">Test</div> 由于parent和child是两个独立的组件，因此它们的样式被锁定在自己的范围内。 在我的父组件中，我尝试执行以下操作： .parent .child { // Styles for child } 但是.child样式没有被应用到child组件。 我尝试使用styleUrls将parent的样式表包含到child组件中来解决范围问题： // child.component.ts styleUrls: [ './parent.component.css', './child.component.css', ] 但这无济于事，还尝试了另一种方法，即将child样式表提取进来，parent但这也无济于事。 那么，如何设置父组件中包含的子组件的样式？

264 css  angular  angular-components 

我有一个<td>必须禁用的链接按钮。这适用于IE，但不适用于Firefox和Chrome。结构是-内的链接<td>。我无法在中添加任何容器<td>（例如div / span） 我尝试了以下所有方法，但无法在Firefox上运行（使用1.4.2 js）： $(td).children().each(function () { $(this).attr('disabled', 'disabled'); }); $(td).children().attr('disabled', 'disabled'); $(td).children().attr('disabled', true); $(td).children().attr('disabled', 'true'); 注意-我无法取消注册锚标记的click功能，因为它是动态注册的。而且我必须在禁用模式下显示链接。

263 javascript  jquery  html  css 

这是我尝试过的（请参阅此处）： body { overflow: hidden; } span { border: solid 2px blue; white-space: nowrap; text-overflow: ellipsis; } 本质上，当窗口变小时，我希望跨度以省略号缩小。我做错什么了？

263 html  css 

我有一段很大的文字，用分为多个子段落<br>： <p> Blah blah blah. <br/> Blah blah blah. Blah blah blah. Blah blah blah. <br/> Blah blah blah. </p> 我想扩大这些分段之间的距离，例如存在两个<br>或类似的东西。我知道正确的方法是使用<p></p>，但现在我无法更改此布局，因此我正在寻找仅CSS解决方案。 我试过设置<br>的line-height和height有display: block，我也一派，堆栈溢出-ED简单，但没有找到任何解决方案。在不更改布局的情况下是否有可能？

263 html  css 

我正在尝试使用:before选择器将图像放置在另一个图像上，但是我发现将图像放置在一个img元素之前（仅放置在其他元素上）根本不起作用。具体来说，我的风格是： .container { position: relative; display: block; } .overlay:before { content: url(images/[someimage].png); position: absolute; left:-20px; top: -20px; } 我发现这很好用： <a href="[url]" class="container"> <span class="overlay"/> <img width="200" src="[url]"/> </a> 但这不是： <a href="[url]" class="container"> <img width="200" src="[url]" class="overlay"/> </a> 我可以使用divor p元素代替它span，浏览器可以将我的图像正确地覆盖在该img元素中的图像上，但是如果我将overlay类应用于img自身，则无法正常工作。 我希望这项工作能够成功进行，因为这会让我感到不span舒服，但更重要的是，我有大约100个我想修改的博客文章，如果可以修改样式表，我可以一次性完成，但是如果我必须返回并span在a和img元素之间添加一个额外的元素，这将需要做更多的工作。

262 html  css 

CSS将Div推到页面底部 请查看该链接，我希望得到相反的结果：当内容溢出到滚动条时，我希望页脚始终位于页面的整个底部，例如Stack Overflow。 我有一个div id="footer"和这个CSS： #footer { position: absolute; bottom: 30px; width: 100%; } 但是它所做的只是进入视口的底部，即使向下滚动也可以停留在视口的底部，因此它不再位于底部。 图片： 很抱歉，如果没有弄清楚，我不希望将其修复，仅因为它位于所有内容的实际底部即可。

261 css  positioning  css-position  footer 

我有一个项目，要求打印带有许多行的HTML表格。 我的问题是表格在多页上的打印方式。有时它将切成两行，使其变得不可读，因为一半在页面的前沿，而其余部分则打印在下一页的顶部。 我能想到的唯一可行的解​​决方案是使用堆叠的DIV而不是表格，并在需要时强制分页。.但是在进行整个更改之前，我想我可以在这里问一下。

261 html  css  printing  html-table 

我有一个表，其中通过不存在的CSS类通过jQuery显示/隐藏整列： <table> <thead> <tr> <th></th> <th class="target"></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td class="target"></td> <td></td> </tr> <tr> <td></td> <td class="target"></td> <td></td> </tr> </tbody> </table> 有了这个DOM，我可以通过jQuery在一行中完成此操作： $('.target').css('display','none'); 这很好用，但是使用未定义的CSS类是否有效？我应该为此创建一个空类吗？ <style>.target{}</style> 是否有任何副作用或有更好的方法来做到这一点？

260 html  css  w3c-validation  web-standards 

我想设计一个带有横幅和iframe的网页。我希望iframe可以填满所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否可以仅使用CSS而无需编写Javascript代码来完成它？ 我尝试height:100%在iframe上进行设置，结果非常接近，但是iframe尝试填充整个页面高度，包括30pxbanner div元素的高度，所以我得到了不必要的垂直滚动条。这不是完美的。 更新说明：对不起，我没有很好地描述问题，我尝试使用CSS边距，DIV上的padding属性成功占据网页的整个刷新高度，但该技巧在iframe上不起作用。 <body> <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div> <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe> </body> 运行代码段隐藏结果展开摘要 任何想法表示赞赏。

260 html  css  iframe 

我想从中删除所有缩进ul。我试着设置margin，padding，text-indent给0，却无济于事。似乎设置text-indent为负数确实可以解决问题-但这真的是消除缩进的唯一方法吗？

260 html  css 

我想要一个“内部”列表，其中列表项目符号或十进制数字与上等文本块完全对齐。列表条目的第二行必须具有与第一行相同的缩进！ 例如： Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 1. Text 2. Text 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text …

260 html  css  html-lists 

我正在使用一个伸缩框来显示8个项目，这些项目将随我的页面动态调整大小。如何强制将项目分成两行？（每行4个）？ 这是一个相关的片段： （或者，如果您更喜欢jsfiddle- http://jsfiddle.net/vivmaha/oq6prk1p/2/） .parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; flex-wrap: wrap; margin: -10px 0 0 -10px; } .child { display: inline-block; background: blue; margin: 10px 0 0 10px; flex-grow: 1; height: 100px; } <body> <div class="parent-wrapper"> <div class="parent"> …

260 html  css  flexbox