Questions tagged «css»

:hover如果用户通过触摸设备访问我们的网站，我想忽略所有CSS声明。因为:hoverCSS没有意义，而且如果平板电脑在单击/点击时将其触发，它甚至可能会令人不安，因为它可能会一直停留到元素失去焦点为止。老实说，我不知道为什么触摸设备首先感觉到需要触发:hover-但这是现实，所以这个问题也是现实。 a:hover { color:blue; border-color:green; // etc. > ignore all at once for touch devices } 因此，如何:hover在声明触摸设备后立即删除/忽略所有CSS 声明（而不必知道每个CSS ）？

141 html  css  hover  touch 

我有一个左右Flexbox： .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> 运行代码段隐藏结果展开摘要 问题在于正确的孩子没有做出反应。具体来说，我希望它填充包装纸的高度。 如何做到这一点？

141 css  flexbox 

这是一个有趣的CSS问题！ 我有一个带有透明背景的文本区域，上面覆盖着一些我想用作水印的文本。文本很大，占据了大部分文本区域。看起来不错，问题是当用户单击文本区域时，有时会选择水印文本。我希望水印文本永远不可选择。我原以为如果z索引中的某个值较低，那将是无法选择的，但浏览器在选择项目时似乎并不关心z索引层。有没有技巧或方法可以使该DIV永远不会被选择？

140 css 

是否有理由使用a <div style="display:inline-block">而不是a <span>来布局网页？ 我可以将内容嵌套在跨度内吗？什么是有效的，什么不是？ 可以使用它制作3x2的表格，例如布局吗？ <div> <span> content1(divs,p, spans, etc) </span> <span> content2(divs,p, spans, etc) </span> <span> content3(divs,p, spans, etc) </span> </div> <div> <span> content4(divs,p, spans, etc) </span> <span> content5(divs,p, spans, etc) </span> <span> content6(divs,p, spans, etc) </span> </div>

140 css  html 

我在哪里，在正常情况下，CSS，固定股利将正好它被指定的（定位的情况下top:0px，left:0px）。 如果我的父母有一个translate3d转换，这似乎不被尊重。我没看到什么吗？我尝试了其他webkit转换，例如样式和转换原点选项，但没有运气。 我在JSFiddle上附加了一个示例，在该示例中，我希望黄色框位于页面的顶部，而不是容器元素的内部。 您可以在下面找到小提琴的简化版本： #outer { position:relative; -webkit-transform:translate3d(0px, 20px , 0px); height: 300px; border: 1px solid #5511FF; padding: 10px; background: rgba(100,180,250, .8); width: 80%; } #middle{ position:relative; border: 1px dotted #445511; height: 300px; padding: 5px; background: rgba(250,10,255, .6); } #inner { position: fixed; top: 0px; box-shadow: 3px 3px 3px #333; …

140 html  css  css-position  css-transforms 

假设我想要一种只显示HTML中250x250像素的图像的中心50x50像素的方法。我怎样才能做到这一点。另外，有没有办法对css：url（）引用执行此操作？ 我知道CSS中的clip，但这似乎仅在与绝对定位一起使用时才起作用。

140 html  css  image 

我想创建包含在几个html页面中的通用页眉和页脚页面。 我想使用JavaScript。有没有办法只使用html和JavaScript来做到这一点？ 我想在另一个html页面中加载页眉和页脚页面。

140 javascript  jquery  html  css 

我正在尝试在媒体查询中使用CSS变量，但它不起作用。 :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { }

140 css  media-queries  css-variables 

我们为什么没有box-sizing: margin-box;？通常，当我们放入box-sizing: border-box;样式表时，我们实际上是指前者。 例： 假设我有2列的页面布局。这两列的宽度均为50％，但它们看起来有点丑陋，因为没有装订线（中间有缝隙）。下面是CSS： .col2 { width: 50%; float: left; } 要应用装订线，您可能会认为我们可以在两列的第一列中设置合适的边距；像这样的东西： .col2:first-child { margin-right: 24px; } 但这将使第二列换行，因为以下内容是正确的： 50% + 50% + 24px > 100% box-sizing: margin-box;可以通过在元素的计算宽度中包括边距来解决此问题。我觉得这很有用，即使没有比有用box-sizing: border-box;。

139 css  layout  position  w3c 

将divs 附加到div具有固定高度的a时，子div将从顶部到底部出现，并停留在顶部边框处。 ┌─────────────────────────┐ │ Child Div 1 │ │ Child Div 2 │ │ │ │ │ │ │ └─────────────────────────┘ 我现在正尝试像这样（从底部边框开始）从下至上显示它们： ┌─────────────────────────┐ │ │ │ │ │ │ │ Child Div 1 │ │ Child Div 2 │ └─────────────────────────┘ ┌─────────────────────────┐ │ │ │ │ │ Child Div 1 │ │ …

139 html  css  scrollbar  vertical-alignment  alignment 

我有2种基本形式-登录和注册，都在同一页面上。现在，我可以自动填写表单登录了，但是注册表单也会自动填写，我不喜欢它。 另外，表单样式的背景为黄色，我无法覆盖它，也不想使用内联CSS来实现。我该怎么办才能使它们停止变为黄色和（可能）自动填充？提前致谢！

139 html  css  input  autofill 

我想为单选按钮的选定标签添加样式： HTML： <div class="radio-toolbar"> <label><input type="radio" value="all" checked>All</label> <label><input type="radio" value="false">Open</label> <label><input type="radio" value="true">Archived</label> </div> 的CSS .radio-toolbar input[type="radio"] {display:none;} .radio-toolbar label { background:Red; border:1px solid green; padding:2px 10px; } .radio-toolbar label + input[type="radio"]:checked { background:pink !important; } 有什么想法我做错了吗？

139 html  css 

我可以使用Markdown在段落上定义类名吗？如果是这样，怎么办？

139 css  markdown 

我试图了解对我来说似乎是意外的行为： 我在容器内有一个最大高度为100％的元素，该容器也使用最大高度，但是，出乎意料的是，子代溢出了父代： 测试案例：http：//jsfiddle.net/bq4Wu/16/ .container { background: blue; padding: 10px; max-height: 200px; max-width: 200px; } img { display: block; max-height: 100%; max-width: 100%; } 但是，如果给定父级的显式高度，则此问题是固定的： 测试案例：http：//jsfiddle.net/bq4Wu/17/ .container { height: 200px; } 有谁知道为什么孩子在第一个例子中不尊重父母的最大身高？为什么需要一个明确的高度？

139 css 

我尝试使用此方法（他们的小提琴）来使用Bootstrap启用可滚动菜单，但是通过这种方法，可滚动菜单正确地扩展了它的容器- 小提琴 -非可滚动菜单不会执行此操作。 我怎样才能解决这个问题？也欢迎其他与Bootstrap兼容的方法的建议！ 作为参考，以下是第一种方法的提琴形式的HTML： <ul class="nav"> <li class="dropdown"> <a class="icon-key icon-white" data-toggle="dropdown" href="#" style= "font-weight: bold"></a> <div class="dropdown-menu" style="margin-left: 2em"> <ul class="dropdown-menu"> <!-- static non-scrollable menu header 1 --> </ul> </div> <div class="dropdown-menu" style="margin-left: 2em"> <ul class="dropdown-menu"> <li class="disabled"> <a href="#"><i class="icon-group"></i> <b>My Groups</b></a> </li> <li> <div class="dropdown-menu scroll-menu …

138 css  twitter-bootstrap  scrollable