程序设计 css

5

如何使用CSS翻转任何背景图片？可能吗？ currenty我使用这个箭头图像中background-image的liCSS中开启：visited我需要水平翻转此箭头。我可以这样做来制作另一个箭头图像，但我只是好奇地知道是否有可能在CSS中翻转图像:visited

224 css mobile-webkit

3

flex-basis和width有什么区别？

关于此有很多问题和文章，但据我所知，尚无定论。我能找到的最佳总结是 flex-basis允许您在计算其他任何内容之前指定元素的初始/开始大小。它可以是百分比或绝对值。 ...这本身并没有过多说明具有flex-basis设置的元素的行为。以我目前对flexbox的了解，我不明白为什么那也不能描述宽度。我想知道flex-basis与实际宽度有何不同：如果我用flex-basis代替width（反之亦然），那么视觉上会发生什么变化？如果将两者都设置为不同的值会怎样？如果它们具有相同的值会怎样？在某些特殊情况下，使用width或flex-basis与使用其他宽度或flex-basis会有很大区别吗？如何宽度和柔性基础上与其他Flexbox的风格，如配合使用时，不同的柔性包装，柔性成长和弹性收缩？还有其他重大区别吗？编辑/说明：在“究竟什么是flex-basis属性集”中以另一种格式提出了此问题？但是我觉得更直接地比较或总结flex-basis和width（或height）的区别是不错的。

224 css flexbox width

30

字体太棒了，图标显示为正方形

因此，我正在尝试制作营销页面的原型，并使用Bootstrap和新的Font Awesome文件。问题是，当我尝试使用图标时，页面上呈现的所有内容都是一个大方块。这是我将文件包含在头中的方式： <head> <title>Page Title</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-responsive.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/app.css">  </head> 这是我尝试使用图标的示例： <i class="icon-camera-retro"></i> 但是所有这些都呈现在一个大方块中。有人知道会发生什么吗？

224 css html twitter-bootstrap font-awesome

4

CSS-溢出：滚动；-总是显示垂直滚动条？

所以目前我有： #div { position: relative; height: 510px; overflow-y: scroll; } 但是，我认为对于某些用户而言，那里会有更多的内容是显而易见的。他们可以在不知道我的div实际包含更多内容的情况下向下滚动页面。我使用510px的高度，因此它会截断一些文本，因此在某些页面上看起来确实有更多内容，但这不适用于所有页面。我使用的是Mac，在Chrome和Safari中，垂直滚动条仅在鼠标悬停在Div上并且您正在滚动时才会显示。有没有办法一直显示它？

224 css macos scroll overflow

17

背景颜色未显示在打印预览中

我正在尝试打印页面。在该页面中，我为表格提供了背景色。当我在chrome中查看打印预览时，它不具有背景色属性... 所以我尝试了这个属性： -webkit-print-color-adjust: exact; 但仍然没有显示颜色。 http://jsfiddle.net/TbrtD/ .vendorListHeading { background-color: #1a4567; color: white; -webkit-print-color-adjust: exact; } <div class="bs-docs-example" id="soTable" style="padding-top: 10px;"> <table class="table" style="margin-bottom: 0px;"> <thead> <tr class="vendorListHeading" style=""> <th>Date</th> <th>PO Number</th> <th>Term</th> <th>Tax</th> <th>Quote Number</th> <th>Status</th> <th>Account Mgr</th> <th>Shipping Method</th> <th>Shipping Account</th> <th style="width: 184px;">QA</th> <th id="referenceSO">Reference</th> <th id="referenceSO" style="width: …

223 google-chrome css printing webkit

7

两个div并排-流体显示

我试图并排放置两个div，并使用以下CSS。 #left { float: left; width: 65%; overflow: hidden; } #right { overflow: hidden; } HTML很简单，在包装div中有两个左和右div。 <div id="wrapper"> <div id="left">Left side div</div> <div id="right">Right side div</div> </div> 我已经尝试了很多次，也在StackOverflow和其他站点上寻找更好的方法，但是找不到确切的帮助。因此，代码乍一看工作正常。问题是，当我增加（％）的宽度时，左div自动获得填充/边距。因此，在65％的宽度处，左div有一些填充或边距，并且与右div并不完全对齐，我尝试填充/边距0但没有运气。其次，如果我放大页面，则右div会滑到左div之下，这就像没有流畅的显示一样。注意：很抱歉，我进行了很多搜索。这个问题已经被问过很多次了，但是这些答案并没有帮助我。我已经说明了我的问题所在。我希望有解决办法。谢谢。编辑：对不起，我是HTML问题，在左右两侧都有两个“ box” div，它们的填充百分比为％，所以左侧由于宽度较大而显示了更多的填充。抱歉，以上CSS完美运行，显示流畅并已修复，很抱歉提出错误的问题...

222 css html fluid-layout fluid

3

iPad / iPhone上的CSS提交按钮怪异渲染

我注意到，如果我使用半径，颜色和边框使用CSS设置按钮样式，它们看起来不错，但在iphone / ipad / ipod中它们看起来糟透了……不应该与Safari桌面中的呈现方式相同？

222 iphone css ipad mobile-safari mobile-webkit

12

如何在HTML中创建泪珠？

如何创建这样的形状以显示在网页上？我不想使用图像，因为它们在缩放时会变得模糊我尝试过CSS： .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> 运行代码段隐藏结果展开摘要事实证明真是搞砸了。然后我尝试使用SVG： <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> 运行代码段隐藏结果展开摘要它确实得到了形状，但底部没有弯曲。有没有一种方法可以创建此形状，以便可以在HTML页面中使用它？

222 html css svg css-shapes

7

如何在html表格行中将文本居中对齐？

我正在使用HTML <table>，我想将其文本对齐<td>到每个单元格的中心。如何居中对齐文本水平和垂直方向？

222 html css

17

HTML列表样式类型的连字符

有没有一种方法可以用破折号（即-或- &ndash;或- &mdash;）在HTML中创建列表样式，即 <ul> <li>abc</li> </ul> 输出： - abc li:before { content: "-" };尽管我不知道该选项的弊端，但我想用类似的方法来做到这一点（并且有很多反馈的义务）。更笼统地说，我不介意知道如何将通用字符用于列表项。

222 html css xhtml html-lists

16

id和class有什么区别？

<div class="">和<div id="">CSS 的区别是什么？可以使用<div id="">吗？我看到不同的开发人员都以两种方式执行此操作，并且由于我是自学成才的，所以我从来没有真正想过。

222 html css class id

18

CSS：截断表格单元格，但尽可能地适合

认识弗雷德。他是一张桌子： <table border="1" style="width: 100%;"> <tr> <td>This cells has more content</td> <td>Less content here</td> </tr> </table> 弗雷德（Fred）的公寓有个变大小的怪异习惯，因此他学会了隐藏自己的一些物品，以免将其他所有公寓推倒，从而使惠特福德太太的客厅变得li废： <table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;"> <tr> <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td> <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td> </tr> </table> 这行得通，但是弗雷德有种that的感觉，如果他的右单元格（他的昵称为Celldito）放弃了一点空间，那么他的左单元格将不会被大部分时间截断。你能救他的理智吗？总结：只有当所有单元格都放弃所有空格时，表格的单元格才能均匀溢出吗？

222 html css overflow tablelayout

13

除非用户向上滚动，否则将溢出div滚动到底部

我有一个只有300像素大的div，我希望它在页面加载时滚动到内容的底部。该div具有动态添加的内容，并且需要一直向下滚动。现在，如果用户决定向上滚动，我不希望它跳回到底部，直到用户再次向下滚动是否有可能使div保持滚动到底部，除非用户向上滚动，并且当用户滚动回到底部时，即使添加了新的动态内容，它也需要保持在底部。我将如何创建这个。

222 javascript jquery html css scroll

11

响应式引导导航栏中的中心内容

我无法将内容集中在引导导航栏中。我正在使用引导程序3。我已经阅读了许多文章，但是所使用的CSS或方法不适用于我的代码！我真的很沮丧，所以这就像我的最后选择。任何帮助，将不胜感激！ <!DOCTYPE html> <html> <head> <title>Navigation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/style.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> …

221 css twitter-bootstrap navbar

4

<fieldset>调整大小错误；似乎具有不可移动的`min-width：min-content`

问题我有一个<select>它<option>的文本值很长的地方。我要<select>调整其大小，以使其永远不会比其父对象宽，即使它必须切断其显示的文本也是如此。max-width: 100%应该这样做。调整大小之前：调整大小后我想要什么：但是，如果您加载此jsFiddle示例，并将“结果”面板的宽度调整为小于的宽度<select>，则可以看到内部的select <fieldset>无法缩小其宽度。调整大小后，我实际上看到的是：但是，用a <div>代替a<fieldset>的等效页面确实可以正确缩放。如果在一页上一个接一个，则可以看到并更轻松地测试更改。并且，如果删除周围的标签，则可以调整大小。该标签在某种程度上导致水平尺寸调整打破。<fieldset><div><fieldset><fieldset> 该<fieldset>行为是如果有一个CSS规则fieldset { min-width: min-content; }。（min-content手段，大致的最小宽度不会引起孩子溢出。）如果我更换<fieldset>了<div>与min-width: min-content，它看起来完全一样。但是min-content我的样式，浏览器默认样式表或Firebug的CSS Inspector中都没有规则。我试图覆盖<fieldset>Firebug的CSS检查器和Firefox的默认样式表forms.css中可见的所有样式，但这无济于事。专门覆盖min-width，width也没有执行任何操作。码字段集的HTML： <fieldset> <div class="wrapper"> <select id="section" name="section"> <option value="-1"></option> <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option> <option value="1480">Subcontractor</option> <option value="3181">Valley</option> <option …

221 html width fieldset css

Questions tagged «css»