CSS“显示:内联块”拒绝打破界限

发布于 2024-11-26 11:44:06 字数 848 浏览 0 评论 0原文

我正在开发一个项目,并尝试以与 Adi Palaz 使用 此处定义外部链接。我的代码设置与他的相同,但由于某种原因 display: inline-block 溢出了包含的

  • 元素(具有定义的宽度),所以列表元素并排堆叠 2 个。
  • 有人可以告诉我如何在这个演示开发页面的底部强制链接“The Mountain and the Mole Hill”(http://dreamstarstudios.net/sandbox/philosimply/sliding_drawer.html)来断线?我认为 inline-block 的明确目的是让文本显示为块级元素,但仍会断行。更奇怪的是,将其更改为 display: inline 不会强制换行,而只会导致文本溢出定义的宽度:(

    编辑 我很抱歉不进一步解释如果您查看此链接(http://www.adipalaz.com/linksbg.html< /a>)你会看看这位开发人员如何使用 white-space: nowrap (这是必需的)来实现我想要的效果,我真正需要知道的是为什么它对他有效,但对我无效。

    I'm working on a project and I'm attempting to style a specific link type in the same way as Adi Palaz uses here to define external links. I have my code set up the same as his but for some reason display: inline-block is overflowing the containing <li> element (which has a defined width) so that the list elements stack 2 side-by-side.

    Can someone tell me how to go about forcing the link "The Mountain and the Mole Hill" at bottom of this demo, development page (http://dreamstarstudios.net/sandbox/philosimply/sliding_drawer.html) to break lines? I thought inline-block was expressly for the purpose of have text that is displayed as a block level element yet still breaks lines. The even stranger thing is that changing it to display: inline doesn't force a line break but rather just causes the text to overflow the defined width :(

    EDIT My apologies for not explaining further. If you look at this link (http://www.adipalaz.com/linksbg.html) you will see how this developer used white-space: nowrap (which is needed) to achieve the desired effect I'm going for. What I really need to know is why it is working for him but not me.

    如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

    评论(3

    诠释孤独 2024-12-03 11:44:06

    在样式表“第 206 行”中,您正在设置宽度,它完全按照您的指示进行操作,您需要将其加宽或将 clear: Both; 添加到 李。

    in your style sheet 'line 206' you are setting the width, it is doing exactly what you are telling it to do, you will need to make it wider or add clear: both; to the li.

    欲拥i 2024-12-03 11:44:06

    您已在此链接上设置 white-space:nowrap。这就是为什么它不会破裂。

    You've set white-space:nowrap on this link. That's why it won't break.

    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文