CSS“显示:内联块”拒绝打破界限
我正在开发一个项目,并尝试以与 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
只需删除
white-space:nowrap;
http://www. w3schools.com/cssref/pr_text_white-space.asp
Just remove
white-space:nowrap;
http://www.w3schools.com/cssref/pr_text_white-space.asp
在样式表“第 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 theli
.您已在此链接上设置
white-space:nowrap
。这就是为什么它不会破裂。You've set
white-space:nowrap
on this link. That's why it won't break.