程序设计 css

7

我有以下下拉菜单 <label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#"> Action <b class="caret"></b></label> <ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector"> dropdown content goes here </ul> 下拉菜单的左上角位于文本的左下角（动作），但我希望下拉菜单的右上角的位置位于文本的右下角。我怎样才能做到这一点？

108 css twitter-bootstrap drop-down-menu

2

在*字符*中指定宽度

当使用固定宽度的字体时，我想用字符指定HTML元素的宽度。 “ em”单位应该是M字符的宽度，因此我应该能够使用它来指定宽度。这是一个例子： <html> <head> <style> div { font-family: Courier; width: 10em; } </style> </head> <body> <div> 1 3 5 7 9 1 3 5 7 9 1 </div> </body> </html> 结果不是我想要的结果，因为浏览器行在第15列之后而不是10处中断： 1 3 5 7 9 1 3 5 7 9 1 （结果是Firefox和Chromium，都在Ubuntu中。） Wikipedia的文章说，“ em”并不总是M的宽度，因此肯定看起来“ em”单元对此不可信。

108 css font-size

6

如何将CSS3过渡应用于除背景位置以外的所有属性？

我想将CSS过渡应用于除背景位置以外的所有属性。我试图这样做： .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .csstransitions a { -webkit-transition: background-position 0s ease 0s; -moz-transition: background-position 0s ease 0s; -o-transition: background-position 0s ease 0s; -ms-transition: background-position 0s ease 0s; transition: background-position …

108 css css-transitions

12

在Angular 2中动态更新CSS

假设我有一个Angular2组件 //home.component.ts import { Component } from 'angular2/core'; @Component({ selector: "home", templateUrl: "app/components/templates/home.component.html", styleUrls: ["app/components/styles/home.component.css"] }) export class HomeComponent { public width: Number; public height: Number; } 该组件的模板html文件 //home.component.html <div class="home-component">Some stuff in this div</div> 最后是此组件的css文件 //home.component.css .home-component{ background-color: red; width: 50px; height: 50px; } 正如你可以看到有在2个属性width和height。我希望宽度和高度的css样式与width和height属性的值匹配，并且当属性更新时，div的宽度和高度也会更新。完成此操作的正确方法是什么？

108 css angular

9

如何在单击时隐藏可折叠的Bootstrap 4导航栏

我已经使用Bootstrap 4创建了可折叠的导航栏，该导航栏效果很好，但是我希望在用户单击链接时将其关闭。有什么办法吗？谢谢 html导航栏： <nav class="navbar navbar-toggleable-md fixed-top"> <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="container"> <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a> <div class="collapse navbar-collapse" id="navbarDiv"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" …

108 html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

22

CSS的内部文字阴影

我目前正在使用CSS3，并尝试实现这样的文本效果（黑色模糊的内部阴影）：但是我找不到在文本内部创建文本阴影的方法。我不知道是否仍然可能，因为box-shadow元素能够像这样渲染内部阴影： box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5); 有任何想法吗？

107 css text shadow

3

如何将样式应用于嵌入式SVG？

使用<svg>标记将SVG直接包含在文档中时，您可以通过文档的样式表将CSS样式应用于SVG。但是，我试图将一种样式应用于嵌入的SVG（使用<object>标签）。是否可以使用以下代码？ object svg { fill: #fff; }

107 html css svg

8

使用CSS按比例更改图像大小？

我已经尝试了几天，以配置我的缩略图库，以便所有图像都显示相同的高度和宽度。但是，当我将Css代码更改为 max-height: 150px; max-width: 200px; width: 120px; height: 120px; 我得到的都是相同大小的图像，但是长宽比却被拉伸破坏了图像。有没有办法调整图像容器的大小，而不是图像？让我保持宽高比。但仍要调整图像大小。（我不介意我剪掉一些图像。）提前致谢！

107 html css gallery lightbox

9

当浏览器的宽度/高度变化时，如何使用CSS动态调整图像大小？

我不知道如何与浏览器窗口一起调整图像大小，这是我到目前为止所做的（或将整个网站下载为ZIP格式）。这在Firefox中可以正常工作，但在Chrome中却存在问题：图像不一定总是调整大小，它在某种程度上取决于加载页面时窗口的大小。在Safari中也可以，但是有时会以最小宽度/高度加载图像。我不确定这可能是图像尺寸引起的。（如果加载正常，请尝试刷新几次以查看错误。）关于如何使它更加防弹的任何想法？（如果需要JavaScript，我也可以接受，但是最好使用CSS。）

107 css image browser resize window

7

HTML跨度对齐中心不起作用？

我有一些HTML： <div align="center" style="border:1px solid red"> This is some text in a div element! </div> Div正在更改文档上的间距，因此我想为此使用跨度。但是span并没有集中内容： <span style="border:1px solid red;align=center"> This is some text in a div element! </span> 我该如何解决？编辑：我完整的代码： <html> <body> <p>This is a paragraph. This text has no alignment specified.</p> <span style="border:1px solid red;text-align=center"> This …

107 html css

2

将初始宽度用于元素在IE中不起作用

我有一个图形插件，<table>可以在其容器中插入画布和图例。在这个插件table中没有width定义，在我的CSS中，插入我的插件的那个容器内的表有一个宽度。因此，新的div table{ width: 100%}从CSS 继承并呈现错误。我尝试使用width: initial;，在Chrome上看起来不错，但IE不喜欢它检查浏览器的兼容性我承认在脚本/插件中更改/强制使用内联CSS，因为它必须在任何环境中都能工作。最好的解决方案是什么？

107 css internet-explorer cross-browser width

2

H1-H6标签最常用的字体大小是什么？

关闭。这个问题是题外话。它当前不接受答案。想改善这个问题吗？更新问题，使其成为Stack Overflow 的主题。 9年前关闭。改善这个问题我一直不确定从哪里开始，这是一般的最佳实践基准。是的，我知道这取决于您的设计-但是最常见的是什么？这是我目前作为入门者的内容： h1 { font-size: 24px;} h2 { font-size: 22px;} h3 { font-size: 18px;} h4 { font-size: 16px;} h5 { font-size: 12px;} h6 { font-size: 10px;} 是的，我们目前的工作不使用EM。谢谢

107 html css frontend

9

导航分离器

我需要在导航元素之间添加分隔符。分隔符是图像。我的HTML结构如下：ol > li > a > img。在这里，我提出两种可能的解决方案：要添加更多li标签进行分隔（嘘！），在每个元素的图像中包含分隔符（这是更好的选择，但用户可能会单击“ Home”（例如），但进入“ Services”（服务），因为它们彼此落后，并且用户可能不小心单击了属于“服务”）；该怎么办？

107 css navigation usability separator

3

Sass负变量值？

我有几个scss选择器，在其中我使用相同数量的正负值，如下所示： padding: 0 15px 15px; margin: 0 -15px 20px -15px; 我希望对所有15px的量都使用一个变量，但这不起作用： $pad: 15px; padding: 0 $pad $pad; margin: 0 -$pad 20px -$pad; 保证金金额转换为正数。我想念什么吗？

107 css sass compass-sass

1

tr元素周围的边框没有显示？

似乎Chrome / Firefox无法在tr其上显示边框，但是如果选择器为，则可以渲染边框table tr td。如何在tr上设置边框？我的尝试不起作用： table tr { border: 1px solid black; } <table> <tbody> <tr> <td> Text </td> </tr> </tbody> </table> 运行代码段隐藏结果展开摘要 http://jsfiddle.net/edi9999/VzPN2/ 这是一个类似的问题：将边框设置为表tr，除了IE 6和7外，其他所有功能都可以使用，但除IE之外，它似乎都可以使用。

107 html css html-table

Questions tagged «css»