overflow 相关问题

我遇到菜单无序列表问题。由此，列表项超出了和边界，并且只有在到达 ... 的边缘后才开始下一行。我遇到菜单无序列表问题。因此，列表项超出了 <ul> 和 <div> 边界，只有在到达屏幕边缘后才开始下一行。网站如下：http://finalonline.co.uk/mypics/gallery/categories/ 显示：块；总是...从不做 display: inline; 或 display: inline-block; 要修复无序列表从 DIV 中溢出的问题，请尝试进入 CSS 并应用以下内容： ul { list-style-position: inside; } 您可以在 float: left; 上使用 li 而不是 display: inline;。只需记住在父元素上也使用 overflow: hidden;（ul）。另一个选择是使用：display: inline-block，但我对浏览器支持不是100%确定。让它们display: block，而不是inline。要修复无序列表从 DIV 中溢出的问题，我建议进入 CSS 并添加最小宽度。因此，例如，如果您的父级的宽度为：600px，请在该 div 中指定一个类并设置 min-width：600px，这将防止项目彼此堆叠并溢出到父级之外。为我工作。这解决了问题： ul { padding: 0; word-wrap: break-word; overflow: hidden; }

html css overflow html-lists word-boundaries

回答 5 投票 0

SpringBoot应用程序内存始终超过JVM配置的堆大小

Spring Boot应用程序内存使用量持续超过JVM配置的堆大小而没有溢出错误，用top命令查看RES使用量已接近5G。我的应用程序正在部署...

java spring-boot memory memory-leaks overflow

回答 1 投票 0

判断操作是否会导致溢出？

我的应用程序中有一些代表物理单位的类，例如温度。这些类能够拥有一些与之关联并更改的单位，例如 Celciu...

c# floating-point overflow

回答 3 投票 0

freertos 堆栈不会溢出

互联网界的好心人大家好我正在研究 FreeRTOS，我预计 myTaskA 会溢出堆栈，但事实并非如此。怎么会？ FreeRTOSConfig.h #define configCHECK_FOR_STACK_OVERFLOW 2 // 演示...

stack overflow qemu freertos

回答 1 投票 0

VBA-Excel 为什么长数据类型在 64 位之前溢出？

如果我搜索“VBA long”，它会告诉我 long 可以存储最多 2^63 - 1 的数字。但是我收到高于 2^31 - 1 的错误。在下面的代码中，我分离出了我的 3 次尝试转换...

excel vba types overflow long-integer

回答 1 投票 0

CSS 溢出-y：可见，溢出-x：滚动

我在搜索中看到过一些类似的问题，但问题要么没有得到正确回答，要么没有给出答案。那么，我再问一下。 .parent { 溢出-y:滚动;溢出...</desc> <question vote="49"> <p>我在搜索中看到过一些类似的问题，但问题要么没有得到正确回答，要么没有给出答案。那我再问一下吧</p> <pre><code><style> .parent { overflow-y:scroll; overflow-x:visible; width:100px; } .child { position:relative; } .child-menu { position:absolute; top:0px; left:-100px; display:inline-block; } </style> <div class="parent">  <div class="child"> Text Line <div class="child-menu">some pop out stuff</div> </div> </div> </code></pre> <p>好吧，这只是一个例子。但基本上，我想要完成的是让 .child 类在 y 轴上可滚动...上下滚动。但我希望 x 轴......子菜单在 .parent 容器外部可见。</p> <p>这有道理吗？因此，当页面呈现时，浏览器将溢出完全解释为自动，而不考虑单独的轴。我是否做错了什么，或者浏览器在这方面还没有达到 CSS3 规范？大部分只在 Chrome 上进行了测试。 <img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvblFDMFgucG5n" alt="enter image description here"/></p> </question> <answer tick="true" vote="39"> <p>我明白了！</p> <p>父级应该是overflow:auto; .child 应该是position:relative; .child-menu 应该是position:fixed; <strong>NO</strong> 顶部或左侧定位。如果您这样做，它将使其与内容保持一致。</p> <p>如果您需要移动子菜单，请使用边距，而不是顶部或左侧。示例 margin-left:-100px;</p> <p><strong>编辑</strong></p> <p>由于人们似乎仍在使用此功能，请注意，您必须使用 javascript 在页面滚动时移动固定项目。</p> </answer> <answer tick="false" vote="5"> <p>到这里就解决了！他们使用 css 和 JS。</p> <pre><code>.child:hover .child-menu { display: block; } .parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px } .child { position:static; } .child-menu { position:absolute; display:inline-block; display: none; } </code></pre> <p><a href="https://css-tricks.com/popping-hidden-overflow/" rel="noreferrer">https://css-tricks.com/popping-hidden-overflow/</a></p> <p><a href="https://jsfiddle.net/68fBE/2/" rel="noreferrer">https://jsfiddle.net/68fBE/2/</a></p> </answer> <answer tick="false" vote="-1"> <pre><code>.parent { overflow-y: auto; width: 100px; } .child-menu { display: block; position: fixed; top: auto; left: auto; } </code></pre> </answer> </body></html>

css overflow

回答 0 投票 0

如何使用 Tampermonkey 更改“max-h-80 Overflow-y-hidden”内的“最大高度”？

显然，我第一次尝试使用 Tampermonkey 时一直在挣扎。 Bato.to 评论部分仅加载 PC 上图像的前 280 个左右像素，我想将其加倍以获得

google-chrome overflow tampermonkey

回答 1 投票 0

如何使工具提示溢出并在溢出：隐藏的父容器外部正确显示？

我有一个 div 元素的嵌套结构，其中最里面的子元素包含工具提示。父容器（父类）具有CSS属性overflow:hidden。然而，当鼠标悬停在...

html css tooltip overflow

回答 1 投票 0

Chakra UI：需要有关可滚动选项卡内容的帮助

在 Chakra UI 版本 2 中，我有以下选项卡组件，其内容溢出而不是可滚动：函数应用程序（）{ 返回（在 Chakra UI 版本 2 中，我有以下 Tabs 组件，其内容溢出而不是可滚动： function App() { return ( <ChakraProvider> <Box width={300} height={300} borderWidth={2} borderRadius="lg" margin={4} padding={2} > <Flex direction="column"> <Box flex="1"> <Tabs height="full" display="flex" flexDirection="column"> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> </TabList> <TabPanels overflowY="scroll"> <TabPanel> <Text>Content for Tab 1</Text> </TabPanel> <TabPanel> <LoremIpsum /> </TabPanel> </TabPanels> </Tabs> </Box> </Flex> </Box> </ChakraProvider> ); } 结果如下所示：如果删除 Flex 和围绕 Box 组件的内部 Tabs 组件，代码实际上将起作用： function App() { return ( <ChakraProvider> <Box width={300} height={300} borderWidth={2} borderRadius="lg" margin={4} padding={2} > {/*<Flex direction="column">*/} {/*<Box flex="1">*/} <Tabs height="full" display="flex" flexDirection="column"> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> </TabList> <TabPanels overflowY="scroll"> <TabPanel> <Text>Content for Tab 1</Text> </TabPanel> <TabPanel> <LoremIpsum /> </TabPanel> </TabPanels> </Tabs> {/*</Box>*/} {/*</Flex>*/} </Box> </ChakraProvider> ); } 但是，这两个组件源自代码的其他部分，我添加它们只是为了创建一个最小的工作示例并缩小问题范围。不幸的是，它们无法删除。造成这些问题的原因以及如何解决这些问题？单击此处获取工作副本（需要大约 30 秒的时间来加载）。（感谢提前的任何答复，这已经困扰我很长一段时间了。）需要确保所有父组件都指定了它们的高度。具体来说，一旦将 height="full" 属性添加到第二个示例中已删除的 Flex 和 Box 组件中，布局问题就会解决，选项卡内容确实会滚动： function App() { return ( <ChakraProvider> <Box width={300} height={300} borderWidth={2} borderRadius="lg" margin={4} padding={2} > <Flex height="full" direction="column"> <Box height="full" flex="1"> <Tabs height="full" display="flex" flexDirection="column"> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> </TabList> <TabPanels overflowY="scroll"> <TabPanel> <Text>Content for Tab 1</Text> </TabPanel> <TabPanel> <LoremIpsum /> </TabPanel> </TabPanels> </Tabs> </Box> </Flex> </Box> </ChakraProvider> ); }

javascript css reactjs overflow chakra-ui

回答 1 投票 0

防止 CSS 网格列重叠

我对 CSS 相当陌生，并且总是遇到布局问题。我一直在尝试实现一些网格布局，但在折叠浏览器时遇到了麻烦。我有 2 列设置为 40% 60%

css containers overflow css-grid

回答 1 投票 0

翻页卡样式的卡片前部 div 不使用鼠标滚轮滚动 - 显示滚动条，但除非单击，否则无法向下滚动

我有一个“翻转卡”设计，正面 div 上有图像，背面 div 上有文字。卡的背面可让您使用鼠标滚轮向下滚动。卡的正面...

html css overflow

回答 1 投票 0

强制div具有背景图像的大小

在 Div 上使用背景图像时，我无法显示图像的完整高度，也无法使用 height:auto;或高度：100%。为什么会这样呢？我该如何解决这个问题？我创建了一个 JS F...