Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 我在squareqpace网站上添加了一个CSS手风琴菜单,但它似乎超出了网站的边缘_Html_Css_Checkbox_Accordion_Squarespace - Fatal编程技术网

Html 我在squareqpace网站上添加了一个CSS手风琴菜单,但它似乎超出了网站的边缘

Html 我在squareqpace网站上添加了一个CSS手风琴菜单,但它似乎超出了网站的边缘,html,css,checkbox,accordion,squarespace,Html,Css,Checkbox,Accordion,Squarespace,我在squarespace网站上添加了一些代码块,以便为我的faq页面提供一个手风琴式菜单。是我的源代码。然而,由于某些原因,代码元素似乎已经超出了页面的右边缘,因此添加了一个滚动条,但它只是滚动到内容右侧的空白部分(参见附件pic)。我尝试过在所有CSS元素上更改边距、填充和宽度,但我无法使手风琴在屏幕上正确显示。谁能帮帮我吗??这是我正在使用的代码 手风琴{ 保证金:自动; 宽度:100%; 框大小:边框框; } .手风琴包装{ 边框:1px实心#A9A9; 边界半径:4px; 列表样式:

我在squarespace网站上添加了一些代码块,以便为我的faq页面提供一个手风琴式菜单。是我的源代码。然而,由于某些原因,代码元素似乎已经超出了页面的右边缘,因此添加了一个滚动条,但它只是滚动到内容右侧的空白部分(参见附件pic)。我尝试过在所有CSS元素上更改边距、填充和宽度,但我无法使手风琴在屏幕上正确显示。谁能帮帮我吗??这是我正在使用的代码

手风琴{ 保证金:自动; 宽度:100%; 框大小:边框框; } .手风琴包装{ 边框:1px实心#A9A9; 边界半径:4px; 列表样式:无; 保证金:1rem 0; 宽度:100%; 框大小:边框框; } .手风琴头, .手风琴项目{ 浮动:左; 左:1rem; 右侧填充:1rem; 垫面:1毫米; 位置:相对位置; 宽度:100%; 文本对齐:居中; 身高:50%; 框大小:边框框; } .手风琴头{ 背景:汽车; 边框底部:1px实心#A9A9; 边框左上半径:4px; 边框右上角半径:4px; 垫底:1毫米; 框大小:边框框; } .手风琴项目{ 背景:汽车; 边框底部:1px实心#A9A9; 边缘底部:1px; 垫底:0.5雷姆; 身高:50%; 框大小:边框框; } .手风琴项目:最后一种类型{ 边界:0; 边界半径:4px; 填充底部:0; } .手风琴项目跨度{ 位置:绝对位置; 文本对齐:右对齐; 过渡:所有0.2秒缓进; } .accordion\u项目输入[类型=复选框]{ 位置:绝对位置; 光标:指针; 宽度:100%; 身高:50%; z指数:1; 不透明度:0; } .accordion\u项目输入[类型=复选框]:选中~div.panel{ 浮动:左; 保证金:5px0; 最大高度:0; 不透明度:0; 转换:翻译(0,50%); } .accordion\u项目输入[类型=复选框]:选中~span{ 变换:旋转(90度); }

  • 订阅常见问题
  • +问题1 对问题1的答复
  • +问题2 对问题2的答复
  • +问题3 对问题3的答复

查看我发现的从输入类中删除宽度的CSS,修复了这个问题:D

.accordion__item input[type="checkbox"] {
    position: absolute;
    cursor: pointer;
    **width: 100%;** <--- remove this :D 
    height: 50%;
    z-index: 1;
    opacity: 0;
}
.accordion\u项目输入[type=“checkbox”]{
位置:绝对位置;
光标:指针;

**宽度:100%;***当使用绝对位置而不设置left属性时,该属性的默认值为“auto”

据 :

“auto=auto允许浏览器计算左边缘位置。这是默认值”

如果将此元素的left属性设置为值“0”,则它将从页面左侧的边缘定位

.accordion\u项目输入[类型=复选框]{
位置:绝对位置;
左:0;/*添加此行*/
光标:指针;
宽度:100%;
身高:50%;
z指数:1;

不透明度:0;}
您好,欢迎使用SO。请使用SO代码段(ctrl+m)下次插入代码时。可以分析/运行代码段,以便我们可以实际看到代码在做什么。我编辑了您的问题以使用代码段。不要使用宽度
100%
而使用
100vw
。也不要使用
翻译
到cenetr元素。使用正确的工具(
margin:0 auto;
,''text align:center`或
flexbox
)。Float也不应该用于样式设计。它从来没有打算仅用于文本段落中的浮动图像。这种“误用”是没有必要的,因为我们已经使用flexbox和css网格好几年了。