程序设计 css

11

我有一张表格，其中一列包含十进制数字。我希望以类似于文字处理器的“十进制制表符”功能的方式对齐它们，以便所有点都位于一条垂直线上。目前，我有两种可能的解决方案，但我希望有更好的解决方案... 解决方案1：在HTML中拆分数字，例如 <td><div>1234</div><div class='dp'>.5</div></td> 与 .dp { width: 3em; } （是的，此解决方案不能完全按原样工作。但是，此概念是有效的。）解决方案2：我发现提到 <col align="char" char="."> 根据参考页，这是HTML4的一部分，但是在我必须使用的浏览器FF3.5，Safari 4或IE7中却无法使用。它还存在无法将数字格式提取到CSS的问题（尽管由于它影响到整个列，所以我认为这并不奇怪）。因此，有谁有更好的主意？

71 html css

8

使用jQuery更改CSS类属性

有没有一种方法可以使用jQuery更改CSS类的属性，而不是元素属性？这是一个实际的例子：我上课有一个div red .red {background: red;} 我要更改类red背景属性，而不是已red分配了类背景的元素。如果我使用jQuery .css（）方法做到这一点： $('.red').css('background','green'); 它会影响现在具有class的元素red。到这里为止一切都很好。但是，如果我进行Ajax调用，并在redclass中插入更多div ，则这些背景将不会具有绿色背景，而它们将具有初始red背景。我可以再次调用jQuery .css（）方法。但是我想知道是否有一种方法可以更改类本身。请考虑这只是一个基本示例。

71 jquery css ajax class properties

8

可以将边界半径与具有渐变的边界图像一起使用吗？

我正在对具有圆形边框（边界半径）的输入字段进行样式设置，并尝试向该边框添加渐变。我可以成功制作渐变色和圆角边框，但是不能同时使用。它可以是不带渐变的圆角，也可以是带渐变但不带圆角的边界。 -webkit-border-radius: 5px; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%; 无论如何，两个CSS属性可以一起工作，还是不可能？

71 css

6

每个子元素都有延迟的CSS动画

我试图通过将动画应用于每个子元素来创建级联效果。我想知道是否有比这更好的方法： .myClass img:nth-child(1){ -webkit-animation: myAnimation 0.9s linear forwards; } .myClass img:nth-child(2){ -webkit-animation: myAnimation 0.9s linear 0.1s forwards; } .myClass img:nth-child(3){ -webkit-animation: myAnimation 0.9s linear 0.2s forwards; } .myClass img:nth-child(4){ -webkit-animation: myAnimation 0.9s linear 0.3s forwards; } .myClass img:nth-child(5){ -webkit-animation: myAnimation 0.9s linear 0.4s forwards; } 依此类推...因此，基本上，我希望每个孩子都有一个动画开始，但要有一个延迟。感谢您的输入！另外：也许我没有正确解释我所关注的问题：无论我有多少孩子，这都是关于如何做到这一点的。如何执行此操作而不必写下每个孩子的属性……例如，当我不知道会有多少个孩子时。

71 animation css delay css-selectors

10

将按钮组的宽度设置为100％，并使按钮相等？

我正在使用Bootstrap，我想将整个区域设置为btn-group其父元素的宽度的100％。我也希望内部按钮采用相同的宽度。就那样，我也无法实现。我在这里做了一个JSFiddle：http : //jsfiddle.net/BcQZR/12/ 这是HTML： <div class="span8 background"> <div class="btn-group btn-block" id="colours"> <span class="btn"><input type='checkbox' name='size' value='red'/>red</span> <span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span> <span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span> </div>  </div> 这是我当前的CSS，它不起作用： #colours { width: 100%; }

71 css twitter-bootstrap

3

div悬停背景颜色变化？

如何使其表现得像div线是锚点一样，所以当我将鼠标悬停在它上面时，它会变成红色的CSS .e { width:90px; border-right:1px solid #222; text-align:center; float:left; padding-left:2px; cursor:pointer; } .f .e { background-color:#F9EDBE; } 的HTML <div> <div class="e" >Company</div> <div class="e">Target</div> <div class="e" style="border-right:0px;">Person</div> </div> <div class="f"> <div class="e">Company</div> <div class="e">Target</div> <div class="e" style="border-right:0px;">Person</div> </div> <div> <div class="e">Company</div> <div class="e">Targetaaa</div> <div class="e" style="border-right:0px;">Person</div> </div> <div class="f"> …

71 css html hover

4

如何仅使用CSS将Div固定到页面顶部

我正在写词汇表页面。我在页面顶部有字母链接。我想保持页面顶部（包括字母链接）固定，而带有定义的页面部分在单击字母时向上/向下滚动。我的HTML看起来像这样： <html> <head><title>My Glossary</title></head> <body> <div id="top"> <a href="#A">A</a> | <a href="#B">B</a> | <a href="#Z">Z</a> </div> <div id="term-defs"> <dl> <span id="A"></span> <dt>foo</dt> <dd>This is the sound made by a fool</dd>  </dl> </div> </body> </html> [编辑] 我尝试创建的效果类似于此处的效果。区别在于链接的示例中，当用户单击类别时完成页面滚动。就我而言，我想在单击页面顶部的索引（即字母）时滚动页面。

71 html css

3

：最后一个孩子不能按预期工作？

问题出在此CSS和HTML之内。这是jsFiddle的链接带有示例代码的。的HTML <ul> <li class"complete">1</li> <li class"complete">2</li> <li>3</li> <li>4</li> </ul> 的CSS li.complete:last-child { background-color:yellow; } li.complete:last-of-type { background-color:yellow; } 这两行CSS都不应该针对带有“ complete”类的最后一个li元素吗？ jQuery中的此查询也不针对它： $("li.complete:last-child"); 但这确实做到了： $("li.complete").last(); 显示代码段 li { background-color: green; } li.complete:first-child { background-color: white; } li.complete:first-of-type { background-color: red; } li.complete:last-of-type { background-color: blue; } li.complete:last-child { background-color: yellow; …

71 html css css-selectors

8

如何使标题保持静态，并在滚动时始终位于顶部？

我如何header避免滚动页面的其余部分？我考虑过使用frame-sets和iframes，只是想知道是否有一种更简单，更用户友好的方式，这样做的最佳实践是什么？

71 javascript html css

3

CSS3 calc（100％-88px）在Chrome中不起作用

我注意到CSS 3calc()函数作为单位的用法width在最新版本的Chrome中不起作用。在Chrome Developer工具中，带有的规则calc()具有删除线，并在其左侧的黄色三角形中带有感叹号。这表示无法识别该属性或值。如何使它在现代浏览器中运行？因为它是一个值而不是一个属性，所以供应商前缀在哪里？更新：当我说它不起作用时，我的意思是Chrome开发工具在说它无法识别我的用法width: calc(100%-88px);。我怎么知道它无法识别？由于chrome开发工具中样式规则旁边的删除线和黄色三角形图标。

71 google-chrome css

20

如何根据内容自动调整<div>高度？

我有一个<div>需要根据其中的内容自动调整的功能。我怎样才能做到这一点？现在，我的内容来自<div> 我用于div的类如下 box-centerside { background:url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent; float:left; height:100px; width:260px; }

71 css html

6

使用JavaScript将CSS添加到<head>？

有没有一种方法可以将javascript文件中的字符串中的css添加到使用javascript的文档的开头？假设我们有一个网页，其中包含一个灯箱脚本，该脚本需要一个css文件才能运行。现在，添加此css文件<link>将使css文件下载，即使对于未启用js的用户也是如此。我知道我可以使用脚本动态加载css文件，但这也意味着将有2个http请求，并且在文件中几乎没有css的情况下，我发现这种效率低下。所以我对自己想，如果您可以将css文件中的css放入脚本中，让该脚本解析css并将其添加到头部，或者更好的是让脚本直接将css添加到脚本中的 <head>该文件中。但是我没有在网上发现任何暗示这是可行的方法，因此是否有可能用js将css添加到头部？编辑+解决方案：我将roryf的答案编辑为可跨浏览器使用（IE5除外） Javascript： function addcss(css){ var head = document.getElementsByTagName('head')[0]; var s = document.createElement('style'); s.setAttribute('type', 'text/css'); if (s.styleSheet) { // IE s.styleSheet.cssText = css; } else { // the world s.appendChild(document.createTextNode(css)); } head.appendChild(s); }

71 javascript html css

10

如何使文字与图标字体垂直对齐？

我有一个非常基本的HTML，其中混合了纯文本和图标字体。问题在于图标的渲染高度与文本的高度不同： <div class="ui menu"> <a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a> <a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a> <a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a> </div> 运行代码段隐藏结果展开摘要有什么建议可以解决吗？

71 html css fonts font-awesome

3

SCSS / SASS：如何动态生成包含逗号的类列表

我正在使用SASS的SCSS语法来创建动态网格系统，但是遇到了麻烦。我试图像这样使网格系统完全动态： $columns: 12; 然后我创建像这样的列： @mixin col-x { @for $i from 1 through $columns { .col-#{$i} { width: $column-size * $i; } } } 哪个输出： .col-1 { width: 4.16667%; } .col-2 { width: 8.33333%; } etc... 这很好用，但是我接下来要做的是根据所选的$ columns的数目动态生成一列由逗号分隔的长列类-例如，我希望它看起来像这样： .col-1, .col-2, .col-3, .col-4, etc... { float: left; } 我已经累了： @mixin col-x-list …

71 css sass styles stylesheet grid-system

5

弹性物品是否可以与上方物品紧密对齐？

实际上，这是Pinterest布局。但是，在线找到的解决方案包装在圆柱中，这意味着容器在不经意间会水平增长。那不是Pinterest布局，它不适用于动态加载的内容。我想要做的是有一堆固定宽度和不对称高度的图像，水平放置，但是在满足固定宽度容器的限制时，将它们包裹在新行中： flexbox可以做到这一点吗，还是我不得不求助于Masonry这样的JS解决方案？

71 javascript css flexbox pinterest

Questions tagged «css»