草庐IT

overflow-menu

全部标签

html - 伪元素 :before and overflow hidden

我有一个有两个边框的元素。我通过添加一个伪元素实现了这一点:.inner:before{width:72px;height:28px;content:'';display:block;border:3pxsolidrgb(255,0,0);position:absolute;}该元素被另一个具有overflow:hidden属性的div包裹。如您所见:http://jsfiddle.net/HKEn4/1/.inner-element是隐藏的,但不是伪元素(在OSX上使用safari、firefox和chrome进行测试)。如何隐藏伪元素? 最佳答案

jquery - "overflow-x:hidden"只有一侧?

是否可以仅在一侧隐藏元素的水平溢出:左侧或右侧?类似于overflow-x-right:hidden;。我愿意接受基于css和jquery的技巧。 最佳答案 这是使用clip-path实现的方法,它取代了已弃用的clip属性:.outer{background-color:rgba(0,0,255,.5);width:100px;height:100px;margin:100px;clip-path:inset(-100vw-100vw-100vw0);}.inner{background-color:rgba(255,0,0,.5

jquery - "overflow-x:hidden"只有一侧?

是否可以仅在一侧隐藏元素的水平溢出:左侧或右侧?类似于overflow-x-right:hidden;。我愿意接受基于css和jquery的技巧。 最佳答案 这是使用clip-path实现的方法,它取代了已弃用的clip属性:.outer{background-color:rgba(0,0,255,.5);width:100px;height:100px;margin:100px;clip-path:inset(-100vw-100vw-100vw0);}.inner{background-color:rgba(255,0,0,.5

html - 为什么 `ul` 具有 ARIA 角色 `menu` 但 `menuitem` 被禁止用于 `li` ?

刚刚涵盖了关于ARIAroles的一些策略规范.为什么ul具有ARIA角色menu但menuitem对li是禁止的?我想使用ul、li和HTML5的nav元素结合ARIA角色navigation来描述一个导航栏、菜单和菜单项。ARIArolebug?example.comW3'sHTML5validator在这里唠叨我:Badvaluemenuitemforattributeroleonelementli. 最佳答案 Jukka是incorrecthere.W3Cvalidator不检查WHATWGLS,而是检查W3CHTMLspe

html - 为什么 `ul` 具有 ARIA 角色 `menu` 但 `menuitem` 被禁止用于 `li` ?

刚刚涵盖了关于ARIAroles的一些策略规范.为什么ul具有ARIA角色menu但menuitem对li是禁止的?我想使用ul、li和HTML5的nav元素结合ARIA角色navigation来描述一个导航栏、菜单和菜单项。ARIArolebug?example.comW3'sHTML5validator在这里唠叨我:Badvaluemenuitemforattributeroleonelementli. 最佳答案 Jukka是incorrecthere.W3Cvalidator不检查WHATWGLS,而是检查W3CHTMLspe

html - 显示 : Flex loses right padding when overflowing?

我对CSS3flexbox有疑问。如果我将flexbox元素设置为overflow并为子元素设置一个min-width值,父元素上的正确填充会丢失吗?这在所有支持的浏览器上都是一致的。这是一个错误的例子。如果您滚动到容器的右侧,您会看到最后一个子项紧贴容器的右边缘,而不是遵循填充值。.outer{display:flex;flex-direction:row;width:300px;height:80px;border:1px#cccsolid;overflow-x:auto;padding:5px;}.outer>div{flex:11auto;border:1px#cccsolid

html - 显示 : Flex loses right padding when overflowing?

我对CSS3flexbox有疑问。如果我将flexbox元素设置为overflow并为子元素设置一个min-width值,父元素上的正确填充会丢失吗?这在所有支持的浏览器上都是一致的。这是一个错误的例子。如果您滚动到容器的右侧,您会看到最后一个子项紧贴容器的右边缘,而不是遵循填充值。.outer{display:flex;flex-direction:row;width:300px;height:80px;border:1px#cccsolid;overflow-x:auto;padding:5px;}.outer>div{flex:11auto;border:1px#cccsolid

css - 具有 margin-left 和宽度 :100% overflowing on the right side 的 Div

我有2个嵌套的div,它们的宽度应该是100%。不幸的是,带有文本框的内部div溢出并且实际上比外部div大。它有一个左边距并溢出大约边距的大小。我该如何解决?如果我没有做到100%,那么文本框就不是100%宽。 最佳答案 只需删除两个div的宽度即可。div是block级元素,将使用所有可用空间(除非您开始float或定位它们),因此外部div将自动为100%宽,内部div将使用所有剩余空间设置左边距后的空间。我在jsfiddle上添加了一个带有textarea的示例.Updatedexample有一个输入。

css - 具有 margin-left 和宽度 :100% overflowing on the right side 的 Div

我有2个嵌套的div,它们的宽度应该是100%。不幸的是,带有文本框的内部div溢出并且实际上比外部div大。它有一个左边距并溢出大约边距的大小。我该如何解决?如果我没有做到100%,那么文本框就不是100%宽。 最佳答案 只需删除两个div的宽度即可。div是block级元素,将使用所有可用空间(除非您开始float或定位它们),因此外部div将自动为100%宽,内部div将使用所有剩余空间设置左边距后的空间。我在jsfiddle上添加了一个带有textarea的示例.Updatedexample有一个输入。

javascript - 推特 Bootstrap : How to achieve an always-collapsed navbar dropdown menu?

我在TwitterBootstrap中使用Navbar组件http://getbootstrap.com/components/#navbar我的目标是让导航栏始终折叠(即使在桌面大小的设备上查看时也是如此)。如何做到这一点?我创建了这个JSFIDDLE到目前为止我的代码-你会发现它是非常标准的。当结果窗口的尺寸较小时,下拉菜单会折叠。但是,如果您放大结果窗口,则下拉菜单不会折叠。我已经准确地粘贴了JSFiddle中的内容以供引用:TogglenavigationBrandLinkLinkDropdownActionAnotheractionSomethingelsehereSepar