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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2158 天前的主题，其中的信息可能已经有所发展或是发生改变。

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 就会跳到第二行，如果不分结果正确，百思不得其解。

问题菜，请谅解

href

语句

牛角尖

按钮

15 条回复 • 2018-12-13 19:19:16 +08:00

l12ab

2018-12-13 18:43:06 +08:00 via iPhone

你把整个 html 写一行都可以

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>