Questions tagged «css»

在我的mat-table中，这里有6列，当任何一列没有更多的单词然后看起来像Image-1，但是当任何一列有更多单词然后UI看起来像Image-2时，那么如何设置UI就像Image-1列中的第6个角中有更多单词？ 图片1 图片2 user.component.html <div class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource"> <ng-container matColumnDef="userimage"> <th mat-header-cell *matHeaderCellDef> # </th> <td mat-cell *matCellDef="let element"> <img src="{{commonUrlObj.commonUrl}}/images/{{element.userimage}}" style="height: 40px;width: 40px;"/> </td> </ng-container> <ng-container matColumnDef="username"> <th mat-header-cell *matHeaderCellDef> Full Name </th> <td mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td> </ng-container> <ng-container matColumnDef="emailid"> <th mat-header-cell *matHeaderCellDef> EmailId …

77 html  css  angular  angular-material 

我有一个包含几组列的表。该表大于我的页面，因此我有一个控件来显示/隐藏这些组中的一些以适合页面。初始表看起来不错：一个组中的所有列都具有相同的宽度。但是当我隐藏一个组时，列的宽度不再相同，看起来很糟。 示例：http : //www.reviews-web-hosting.com/companies/apollohosting.html（断开的链接） 到目前为止，桌子看起来还不错。点击>>。“ Ecommerce Pro”下的第一列比“ Ecommerce Pro”下的其他列宽得多，看起来很奇怪。单击<<，这一次“值”下的第一列太宽。至少在Firefox上。 我尝试使用 <colgroup><col /><col span="5" />... 但没有运气。如果我将col设置为style =“ display：none”，则仍显示列集。 有任何HTML / CSS技巧可将列的宽度保持成组？ 编辑： 要隐藏列，我必须使用可见性：折叠 现在好像调整大小，我不知道为什么

77 html  css 

我的CSS代码带有inline-block。谁能告诉我如何使其在Internet Explorer 6和7中工作。有什么想法吗？也许我做错了什么？谢谢！ #signup { color:#FFF; border-bottom:solid 1px #444; text-transform:uppercase; text-align:center; } #signup #left { display: inline-block } #signup #right { background-image:url(images/signup.jpg); border-left: solid 1px #000; border-right: solid 1px #000; display: inline-block; padding:1% 2% width:16%; } #signup #right a { font-size:100%; font-weight:bold } #signup #right p { font-size:90%; font-weight:bold } …

77 internet-explorer  internet-explorer-7  internet-explorer-6  css 

在我完成的设计中，我有一个需要垂直的元素。我已经获得了CSS才能在除IE9之外的所有浏览器中工作。我将过滤器用于IE7和IE8： progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 但是，这似乎使我的元素在IE9中变得透明，而CSS3的“变形”功能似乎无能为力！ 有人知道IE9中的旋转元素吗？ 非常感谢您的帮助！ W.

77 internet-explorer  css  rotation  internet-explorer-9 

content:使用:before伪元素时，是否可以将HTML嵌入到CSS元素中？ 我想在这样的用例中使用Font Awesome（或Glyphicon）： h1:before { content: "X"; padding-right: 10px; padding-left: 10px; color: @orangeLight; } 哪里X是这样的<i class="icon-cut"></i>。 我当然可以在HTML中手动执行此操作，但我确实想:before在这种情况下使用。 同样，有什么方法可以<i>用作列表项目符号吗？这可行，但是对于多行项目符号项目却无法正常工作： <ul class="icons"> <li><i class="icon-ok"></i> Lists</li> <li><i class="icon-ok"></i> Buttons</li> <li><i class="icon-ok"></i> Button groups</li> <li><i class="icon-ok"></i> Navigation</li> <li><i class="icon-ok"></i> Prepended form inputs</li> </ul>

77 css  twitter-bootstrap  font-awesome 

我想知道是否有某种方法可以使用CSS更改li列表中的最后一个CSS属性。我已经研究过使用:last-child，但是这似乎确实有问题，因此无法为我工作。如有必要，我将使用JavaScript进行此操作，但是我想知道是否有人可以考虑使用CSS解决方案。

77 html  css  css-selectors  html-lists 

如果我有三个向右浮动的元素，那么为什么顺序跟随（请参阅jsfiddle），而元素3实际上是最后一个元素，则元素1是右侧的第一个元素。 现在订购 [3] [2] [1] 但是元素在html中按此顺序排列 [1] [2] [3] 为什么？ http://jsfiddle.net/A9Ap7/

77 html  css 

我想在没有javascript且没有background-images的div中将img居中。 这是一些示例代码 <div> <img src="/happy_cat.png"/> </div> 我不知道img的大小，它应该能够超过父级的宽度 我不知道父div的宽度（是100％） 父div的高度固定 图片大于父对象，并且父对象溢出：隐藏 只需要支持现代浏览器 所需的结果。（忽略不透明度等，只需注意位置）。 我知道使用背景图片可以轻松完成此操作，但这对我来说不是一个选择。我也可以使用javascript，但这似乎是一种非常繁重的方法。 谢谢！ 插口

77 html  css 

如何为以下情况添加类属性（仅使用ReturnUrl）： @using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) { } 我想要这样的东西： @using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl }, new { @class = "login-form" })) { }

77 .net  css  forms  asp.net-mvc-4  html-helper 

如何跟踪包含许多sass文件的整个目录中的更改？我正在使用以下命令来监视sass中的更改 文件： sass --watch style.scss:style.css 但是如何在包含许多sass文件的整个目录/文件夹中监视更改。

77 css  sass  build-process  watch 

假设我的桌子上有一些行和列，所以我想旋转像这样的单元格中的文本： 问题是当我使用样式旋转文本时： #rotate { -moz-transform: rotate(-90.0deg); /* FF3.5+ */ -o-transform: rotate(-90.0deg); /* Opera 10.5 */ -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ 像这样全弄乱了 html代码： <table cellpadding="0" cellspacing="0" align="center"> <tr> <td id='rotate'>10kg</td> <td >B</td> <td >C</td> <td>D</td> <td>E</td> </tr> <tr> <td id='rotate'>20kg</td> …

77 css  html  html-table 

所有， 我希望能够在我的CSS中将calc（）与transform：translateX一起使用。 例如， #myDiv { -webkit-transform: translateX(calc(100% - 50px)); -moz-transform: translateX(calc(100% - 50px)); transform: translateX(calc(100% - 50px)); } 尽管此功能在Chrome，Safari和Firefox中完美运行，但在IE10或IE11中却无法运行。 您可以在此处看到一个简单的示例：http : //jsfiddle.net/SL2mk/9/ 这不可能吗？这是IE中的错误，还是calc()在这种情况下不起作用？ 为了它的价值-我在这里读到，您可以“堆叠”translateX以达到相同的效果，而我的测试似乎证实了这一点。即 #div { transform: translateX(calc(100% - 50px)); } 是相同的： #div { transform: translateX(100%) translateX(-50px); } 但是我不知道这是否是最好，最可靠和面向未来的方法。 我也知道可以使用left代替translateX，但是当与过渡配合使用时，后者要平滑得多，因为据我所知，它会强制使用GPU来处理动画。 预先感谢您的建议和见解！

77 html  css 

我想知道是否有人可以解释如何在引导程序中获得7个相等的列？我想做一个日历。这段代码似乎可以做到5： div class="row"> <div class="col-md-2 col-md-offset-1"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> </div> 我的主要内容有以下课程，所以我希望将7列放在其中： Col-lg-12 谁能解释这是否可能，或者我是否必须坚持偶数？

77 html  css  twitter-bootstrap  twitter-bootstrap-3 

我有一个<div>填充。我已将其设置为height: 0，并给了overflow: hidden和box-sizing: border-box。 的HTML <div>Hello!</div> 的CSS div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 0; overflow: hidden; padding: 40px; background: red; color: white; } http://jsfiddle.net/FA29u/2/ 据我了解，这应该会使它<div>消失。 但是，它仍然可见（在Mac上的Chrome 31和Firefox 25中）。尽管height声明，该声明似乎并不适用于填充box-sizing。 这是预期的行为吗？如果是这样，为什么？MDN页面上box-sizing似乎没有提到此问题。 据我所知，规范也没有—它使我读起来像宽度和高度都应在box-sizing: border-box（或实际上padding-box）设置时包含填充。

77 css 

我试图将带有一些注释的div放置在屏幕的右下角，该注释将一直显示。 我使用以下CSS： #foo { position: fixed; bottom: 0; right: 0; } 它在Chrome 3和Firefox 3.6上都可以正常工作，但IE8很烂... 有什么合适的解决方案？

77 css  cross-browser