草庐IT

boxes_items

全部标签

html - IE11 - border-radius 和 box-shadow 一起导致问题

遵循我的代码:div{display:block;width:500px;height:200px;border:1pxsolidblack;border-radius:5px;transition:box-shadow1s;}div:hover{box-shadow:25px25px0px#000;}Test它可以在Chrome、Safari和Firefox上运行,但在InternetExplorer11上运行不佳,当div不再聚焦时会出现明显的视觉问题。如何解决?JSFiddle:https://jsfiddle.net/aL0t8g21/ 最佳答案

html - 使用 box-sizing 创建内边框

我想创建一个HTML表格,其中每个单元格都是可点击的,点击一个单元格会在单元格内的单个div上添加一个边框。我希望div的边框完全存在于包含它的td的现有范围内,根本不需要调整表格或其单元格的大小。我似乎无法让这件事正确发生。这previousquestion似乎解决了同样的问题,并指向一些关于box-sizingCSS选项的文章。我有一个fiddle,我试图实现它但没有成功:http://jsfiddle.net/YsAGh/3/.*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-

javascript - 在 box-shadow 上使用边框半径

下面代码的结果是这张图片:问题是不是所有的Angular都有边界半径。这是因为父级具有最大宽度,而border-radius仅适用于跨度的末端。有解决办法吗?也许与JS?要检测每条新线并添加另一个带有边界半径背景的跨度?由于响应能力,我无法在跨度中添加中断。在桌面版上,它是一长行。h1span{background-color:#272e3a;-webkit-box-shadow:20px00#272e3a,-20px00#272e3a;box-shadow:20px00#272e3a,-20px00#272e3a;padding:5px;border-radius:4px;font-

javascript - 如何在鼠标悬停时在 HTML 标记中的文本周围显示 "box"?

我正在为InternetExplorer编写BHO,我在其中搜索网页中的特定词并将在HTML标记中找到的词封装起来,以用于样式设置。我有代码可以在将鼠标悬停在标签上时更改样式属性,但我想做的是在单词周围显示一个“框”,但我不想将文本移动到它所在的任何其他位置原来的。为了说明,我制作了一张图片(想象一下“溢出!”这个词在它自己的HTML标签中):图片#1是之前,#2是鼠标悬停在单词上的时候!任何人都可以帮我提供有关如何解决此问题的任何建议吗?Javascript?CSS样式? 最佳答案 在要突出显示的文本周围引入一个标记,并连接onm

html - 定位一个伪 :after element to the right of a list item

我试图将伪:after元素放置在菜单列表项右侧30像素处。无论元素文本的长度如何,我都希望元素向右移动30px。我已将以下代码剥离到我认为解决此问题所需的最低限度。请注意,这是一个移动菜单。菜单和a标签链接扩展了浏览器(手机)的整个宽度。#menu-main-menu-1li{position:relative;list-style:none;}#menu-main-menu-1lia{padding:18px0;display:block;text-align:center;}#menu-main-menu-1a:after{content:"\25CF";position:abso

html - 如何让所有item都缩小到二维最大的item内容?

在下面的示例中,我希望所有元素的宽度都是最大内容(例如元素5)。列表中的元素数量是动态的,可能有一百个每个元素内容的宽度也是动态的。每行中的元素数会因宽度而异容器。期望的输出注意:媒体查询不适用于我的场景。使用CSSFLEXFlex被认为是一维。这意味着它可以在单个轴(行)上实现预期的结果,除非内容小于可用空间。非换行示例(单行).container{display:flex;}.item{background:#58c;text-align:center;white-space:nowrap;margin:010px10px0;flex:1;}12345islonger678Flex

html - Bootstrap 3 : keep navbar items outside the collapse without wrapping to a new line?

这个问题在这里已经有了答案:Excludemenuitemfromthecollapseofbootstrap3navbar(3个答案)关闭6年前。我可以使用一些帮助让我的Bootstrap3导航栏在折叠时看起来正确。如果这是一个重复的问题,我深表歉意,但经过长时间的搜索仍未找到我需要的答案。我已经基于Bootstrap演示代码创建了一个响应式导航栏。在其中,有一个40x40图像和一个链接到下拉菜单的球形字形,我已将其右对齐并从导航折叠中省略。不幸的是,当导航折叠时,40x40和地球仪字形出现在新的一行上,这是我不想要的。当导航折叠时,我的完美布局是让40x40和地球与我的品牌形象、折

html - 删除CSS中复选框的 "box"

我正在尝试删除复选框字段的实际框,并使文本可点击。我怎样才能用JS和css做到这一点?我开始使用按钮,但后来改用复选框,因为复选框的“状态”比按钮更容易发现。但是现在我正在使用css完善页面以获得更好的格式和布局,这些框妨碍了我,我更希望文本在没有框的情况下可以点击。 最佳答案 您可以使用display:none;用CSS隐藏它HTMLasdf​CSS/*forallinputsoftypecheckbox*/input[type="checkbox"]{display:none;}/*forjustthesingleelement

html - 为什么 flex-box 适用于 div,而不适用于表格?

下面的简单代码片段生成一个占用可用屏幕空间的网页,顶部是页眉,底部是页脚,主要内容占用尽可能多的空间(虚线边框使其更易于查看):html,body{width:100%;height:100%;margin:0;padding:0;}body{display:flex;flex-flow:column;}h1,small{flex:01auto;}div{flex:11auto;border:1pxdotted;}SomeHeaderSomeTextSomeFooter如果我修改CSS和HTML以使用table代替div,它不会扩展表格以占用可用空间:html,body{width:1

javascript - Google Maps Info Box - 它可以存在于 map 容器之外吗?

我有一张谷歌地图,真的是标准票价。虽然它很小而且标记上的弹出信息窗口很大,所以我的问题是,这些弹出窗口是否有可能溢出map的边缘并到达实际网站?(有关示例,请参见狡猾的photoshop作业)。alttexthttp://dotcafedesigns.com/stuff/box-breakout.png谢谢! 最佳答案 不是解决方案,而是更多背景...曾经有一个名为BPWindow的商业库可用。但是,它似乎因对GMAP2的更改而无法正常工作,并且似乎不再被列为库。您可能想联系BitPerfect看看发生了什么。http://www.