这是一个创建于 2204 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 就会跳到第二行，如果不分结果正确，百思不得其解。
问题菜，请谅解
代码太长就发个链接吧 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 就会跳到第二行，如果不分结果正确，百思不得其解。
问题菜，请谅解
 |
1
l12ab 2018-12-13 18:43:06 +08:00 via iPhone
你把整个 html 写一行都可以
|
 |
2
gaoan000 OP @l12ab 老哥我不是这个意思 ，可能我标题没说清楚，我的意思是我只有把 li 写成一行才能达到我要的结果，按道理来说应该是没区别的
|
 |
3
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> |
 |
4
azh7138m 2018-12-13 18:52:31 +08:00 via Android
幽灵节点
简单的说，空格换行会占有一定的宽度，你可以在父级设置 font size 0。 |
|
5
gaoan000 OP @wly19960911
谢谢老哥 https://i.loli.net/2018/12/13/5c123a74623ca.jpg 这个是我期望的正确结果 https://i.loli.net/2018/12/13/5c123ab69ec9d.jpg 这个是我手动换行后的结果 |
 |
7
matchadog 2018-12-13 18:58:10 +08:00
我按照例子写的没问题...没动你的意思 还是贴图和完整代码把
|
|
9
azh7138m 2018-12-13 19:01:07 +08:00 via Android
|
|
10
wly19960911 2018-12-13 19:01:07 +08:00
 嗯 我刚刚看到了 MDN 的例子，请注意橙色方框内的阴影，是不是没有和黄色方块连在一起？ 按照 MDN 的例子，如果是恰好的话是五个方块完美挨在一起。 但是看见 display：inline 吗，行内元素，行内元素的换行会造成大概 5px 的间距，这个间距平时排版的时候需要注意一下。 |
|
12
gaoan000 OP @wly19960911 很感谢您的帮忙。我再去好好查查
|
 |
14
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:个人觉得注释法(<!-- -->)最方便~ |
 |
15
cin 2018-12-13 19:19:16 +08:00
节点之间有空白符(制表符, 换行, 空格之类)的话就会自动生成一个空的文本节点(TextNode). 这个节点是有宽度的.
可以试着用 js document.querySelector('ul').childNodes 列出 ul 所有的子节点查看. |
Select Language