<li>元素写成一行为啥会有区别

WEB 菜鸟一只，今天钻了个牛角尖
代码太长就发个链接吧 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Styling_links
<ul>
<li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

这个是 MDN 上的一个把链接转化为按钮的例子（ 5 个按钮按照百分比排列为一行），对着敲结果不对，最后定位到上面的一条语句
如果我把上面的语句<li>手动分行，最后一个 li 就会跳到第二行，如果不分结果正确，百思不得其解。

问题菜，请谅解

gaoan000

2018-12-13 18:45:56 +08:00

@l12ab 老哥我不是这个意思，可能我标题没说清楚，我的意思是我只有把 li 写成一行才能达到我要的结果，按道理来说应该是没区别的

wly19960911

2018-12-13 18:49:00 +08:00

跳到第二行？

能给截图吗，用 https://sm.ms/ 图站上传给我们看看，

不保证对，行内标签换行不换行，会造成一定的间隔，可能是因为这个间隔导致你的布局出现问题。

你可以试试，具体查一下什么叫行内元素，什么叫块级元素

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<span>123</span><a href="">123</a>
</div>

<div>
<span>123</span>
<a href="">123</a>
</div>
</body>
</html>

azh7138m

2018-12-13 18:52:31 +08:00

幽灵节点

简单的说，空格换行会占有一定的宽度，你可以在父级设置 font size 0。

gaoan000

2018-12-13 18:56:26 +08:00

@wly19960911
谢谢老哥
https://i.loli.net/2018/12/13/5c123a74623ca.jpg 这个是我期望的正确结果

https://i.loli.net/2018/12/13/5c123ab69ec9d.jpg 这个是我手动换行后的结果

wly19960911

2018-12-13 19:01:07 +08:00

嗯我刚刚看到了 MDN 的例子，请注意橙色方框内的阴影，是不是没有和黄色方块连在一起？按照 MDN 的例子，如果是恰好的话是五个方块完美挨在一起。

但是看见 display：inline 吗，行内元素，行内元素的换行会造成大概 5px 的间距，这个间距平时排版的时候需要注意一下。

xingyue

2018-12-13 19:19:11 +08:00

首先你这并不是钻牛角尖，这是常见的 "问题"；
然后你给出的 mdn 链接中已经就这个问题给出了答案；

再然后，参见张大大的"百科"： https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
最后 ps:个人觉得注释法()最方便~

cin

2018-12-13 19:19:16 +08:00

节点之间有空白符(制表符, 换行, 空格之类)的话就会自动生成一个空的文本节点(TextNode). 这个节点是有宽度的.
可以试着用 js document.querySelector('ul').childNodes 列出 ul 所有的子节点查看.

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/517313

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.