程序设计 css

17

我在一个项目上使用Twitter Bootstrap。除了默认的引导样式之外，我还添加了一些自己的样式 //My styles @media (max-width: 767px) { //CSS here } 当视口的宽度小于767px时，我还使用jQuery更改页面上某些元素的顺序。 $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } 我遇到的问题是，$(window).width()由CSS计算的宽度与由CSS计算的宽度似乎并不相同。当$(window).width()返回767时，css将其视口宽度计算为751，因此似乎存在16px的差异。有谁知道是什么原因造成的，以及如何解决这个问题？人们建议不要考虑滚动条的宽度，而应该使用滚动条的宽度$(window).innerWidth() < 751。但是，理想情况下，我想找到一种解决方案，该解决方案可以计算滚动条的宽度，并且与我的媒体查询一致（例如，两种情况都对照值767进行检查）。因为肯定不是所有浏览器的滚动条宽度都为16px？

186 jquery css twitter-bootstrap media-queries

8

如何跳到浏览器页面顶部

我正在编写一个模式弹出窗口，当按下打开的模式按钮时，我需要浏览器跳到屏幕顶部。有没有一种使用jQuery将浏览器滚动到顶部的方法？

186 javascript jquery css modal-dialog

4

Twitter Bootstrap按钮文本自动换行

在我的一生中，我无法获得这些twitter twitter bootstrap按钮来将文本换行多行，它们看起来像这样。我无法发布图片，所以这就是正在做的... [这是bu] tton文本我希望它看起来像 [这是] [按钮文字] <div class="col-lg-3">  <div class="panel panel-default"> <div class="panel-body"> <h4>Posted on</h4> <p>22nd September 2013</p> <h4>Tags</h4> <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit …

186 html css twitter-bootstrap web

7

如何使行内块元素填充行的其余部分？

使用CSS和两个内联块（或其他）DIV标签而不是使用表，是否有可能这样做？表格版本是这样的（添加了边框，您可以看到它）： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <table style="width:100%;"> <tr> <td style="border:1px solid black;width:100px;height:10px;"></td> <td style="border:1px solid black;height:10px;"></td> </tr> </table> </body> </html> 它会产生带有固定宽度（而不是百分比宽度）的左列，并且右列会扩展以填充行上的剩余空间。听起来很简单，对吧？此外，由于没有任何东西“浮动”，因此父容器的高度会适当扩展以包含内容的高度。 --BEGIN RANT-- 我已经看到了带有固定宽度的边栏的多列布局的“清晰修复”和“圣杯”实现，它们很烂而且很复杂。他们颠倒了元素的顺序，使用了百分比宽度，或者使用了浮点数，负边距，并且“ left”，“ right”和“ margin”属性之间的关系很复杂。此外，布局是亚像素敏感的，因此即使添加边框，填充或边距的单个像素也将破坏整个布局，并将整列换行发送到下一行。例如，即使您尝试做一些简单的事情（例如，将4个元素放在一行上，每个元素的宽度都设置为25％），舍入误差也是一个问题。 -结束兰特- 我曾尝试使用“ inline-block”和“ white-space：nowrap;”，但问题是我无法获取第二个元素来填充行中的剩余空间。在某些情况下，可以将宽度设置为“ width：100％-（LeftColumWidth）px”，但是实际上不支持在width属性中执行计算。

186 css layout fixed-width

6

相对放置元素而不占用文档流中的空间

如何相对定位元素，并使其不占用文档流中的空间？

186 html css positioning css-position

18

如何用HTML文字换行？

怎样包装aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa超过div（say 200px）宽度的文本？我愿意接受任何解决方案，例如CSS，jQuery等。

185 html css word-wrap

12

如何使用CSS更改输入按钮图像？

因此，我可以使用创建带有图像的输入按钮 <INPUT type="image" src="/images/Btn.PNG" value=""> 但是，使用CSS无法获得相同的行为。例如，我尝试过 <INPUT type="image" class="myButton" value=""> 其中“ myButton”在CSS文件中定义为 .myButton { background:url(/images/Btn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none; } 如果这只是我想做的，则可以使用原始样式，但是我想更改鼠标悬停时的按钮外观（使用myButton:hover类）。我知道链接很好，因为我已经能够将它们加载为页面其他部分的背景图像（仅作为检查）。我在网上找到了如何使用JavaScript的示例，但我正在寻找CSS解决方案。我正在使用Firefox 3.0.3，如果有帮助的话。

184 css input-button-image

12

仅在IE上应用样式

这是我的CSS块： .actual-form table { padding: 5px 0 15px 15px; margin: 0 0 30px 0; display: block; width: 100%; background: #f9f9f9; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; } 我只希望IE 7、8和9能够“看到” width: 100% 最简单的方法是什么？

184 css internet-explorer

8

如何将内部<div>发送到其父<div>的底部？

下面的另一个div图片和代码中的div。因为会有父div的文本和图像。红色div将是父div的最后一个元素。 <div style="width: 200px; height: 150px; border: 1px solid black;"> <div style="width: 100%; height: 50px; border: 1px solid red;"> </div> </div>

184 css html

15

使用CSS检测输入中是否包含文本-我正在访问的页面上不受控制吗？

是否可以通过CSS检测输入中是否包含文本？我试过使用:empty伪类，并且试过使用[value=""]，这两种都不起作用。我似乎找不到单个解决方案。考虑到我们有:checked和和的伪类，我想这一定是有可能的，:indeterminate两者都是相似的。请注意：我这样做是为了“时尚”风格，无法利用JavaScript。另请注意，在用户无法控制的页面上，客户端使用了时尚样式。

184 css input is-empty stylish

16

输入文字中的清除图示

有没有一种快速的方法来创建带有右侧图标的输入文本元素，以清除输入元素本身（例如google搜索框）？我环顾四周，但只发现了如何放置图标作为输入元素的背景。是否有jQuery插件或其他工具？我想要输入文本元素中的图标，例如： -------------------------------------------------- | X| --------------------------------------------------

184 javascript jquery html css

5

如何使flexbox物品的尺寸相同？

我想使用具有一些相同宽度的项目的flexbox。我注意到，flexbox将空间均匀分布，而不是空间本身。例如： .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> <div class="item">z</div> </div> 运行代码段Hide results展开摘要第一项比第二项大很多。如果我有3个项目，4个项目或n个项目，则我希望它们全部显示在同一行上，每个项目具有相等的空间。有任何想法吗？ http://codepen.io/anon/pen/gbJBqM

184 css flexbox

3

结合：after和：hover

我想在CSS（或任何其他伪选择器）中结合:after使用:hover。我基本上有一个列表，并且selected该类的项目具有使用组成的箭头形状:after。我希望对于悬停但无法完全正常运行的对象也是如此。继承人代码 #alertlist { list-style:none; width: 250px; } #alertlist li { padding: 5px 10px; border-bottom: 1px solid #e9e9e9; position:relative; } #alertlist li.selected, #alertlist li:hover { color: #f0f0f0; background-color: #303030; } #alertlist li.selected:after { position:absolute; top: 0; right:-10px; bottom:0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #303030; content: …

184 css css-selectors pseudo-element

6

如何防止IE10中的滚动条覆盖内容？

在IE10中，滚动条并不总是存在的……当它出现时会以覆盖的形式出现……这是一个很酷的功能，但是我想为我的特定网站关闭它，因为它是一个全屏应用程序，而我徽标和菜单丢失了。 IE10：铬：有人知道将滚动条始终固定在IE10上的方法吗？溢出-y：滚动似乎不起作用！它只是将其永久放在我的网站上。可能是导致问题的引导程序，但是我不知道哪一部分！在此处查看示例：http : //twitter.github.io/bootstrap/

183 html css scrollbar internet-explorer-11 internet-explorer-10

14

比使用图片更简单的方法来创建圆形div？

我想知道是否有比我现在更简单的创建循环div的方法。目前，我只是为每种不同的尺寸制作图像，但是这样做很烦人。无论如何，有没有使用CSS制作圆形的div，我可以指定半径吗？

183 html css geometry css-shapes

Questions tagged «css»