Home Sign Up Sign In
gaoan000
V2EX  ›  问与答

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

  •   
  •   gaoan000 · Dec 13, 2018 · 2746 views
    This topic created in 2736 days ago, the information mentioned may be changed or developed.
    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 replies  •  2018-12-13 19:19:16 +08:00
    l12ab
        1
    l12ab  
       Dec 13, 2018 via iPhone
    你把整个 html 写一行都可以
    gaoan000
        2
    gaoan000  
    OP
       Dec 13, 2018
    @l12ab 老哥我不是这个意思 ，可能我标题没说清楚，我的意思是我只有把 li 写成一行才能达到我要的结果，按道理来说应该是没区别的
    wly19960911
        3
    wly19960911  
       Dec 13, 2018
    跳到第二行？

    能给截图吗，用 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
        4
    azh7138m  
       Dec 13, 2018 via Android
    幽灵节点

    简单的说，空格换行会占有一定的宽度，你可以在父级设置 font size 0。
    gaoan000
        5
    gaoan000  
    OP
       Dec 13, 2018
    @wly19960911
    谢谢老哥
    https://i.loli.net/2018/12/13/5c123a74623ca.jpg 这个是我期望的正确结果

    https://i.loli.net/2018/12/13/5c123ab69ec9d.jpg 这个是我手动换行后的结果
    gaoan000
        6
    gaoan000  
    OP
       Dec 13, 2018
    @azh7138m 多谢老哥指点 感谢
    matchadog
        7
    matchadog  
       Dec 13, 2018
    我按照例子写的没问题...没动你的意思 还是贴图和完整代码把
    gaoan000
        8
    gaoan000  
    OP
       Dec 13, 2018
    @azh7138m 我就是不知道中间多出来的这么称呼，乱说又怕人笑话 涨知识了
    azh7138m
        9
    azh7138m  
       Dec 13, 2018 via Android
    @gaoan000 那可以看 https://www.zhangxinxu.com
    人形自走标准和兼容百科
    wly19960911
        10
    wly19960911  
       Dec 13, 2018


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

    但是看见 display：inline 吗，行内元素，行内元素的换行会造成大概 5px 的间距，这个间距平时排版的时候需要注意一下。
    gaoan000
        11
    gaoan000  
    OP
       Dec 13, 2018
    @matchadog 谢谢老哥帮忙 上楼给了思路 我再去网上查查
    gaoan000
        12
    gaoan000  
    OP
       Dec 13, 2018
    @wly19960911 很感谢您的帮忙。我再去好好查查
    gaoan000
        13
    gaoan000  
    OP
       Dec 13, 2018
    @azh7138m 谢谢推荐 我会仔细学习的
    xingyue
        14
    xingyue  
       Dec 13, 2018
    首先你这并不是钻牛角尖，这是常见的 "问题"；
    然后你给出的 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
        15
    cin  
       Dec 13, 2018
    节点之间有空白符(制表符, 换行, 空格之类)的话就会自动生成一个空的文本节点(TextNode). 这个节点是有宽度的.
    可以试着用 js document.querySelector('ul').childNodes 列出 ul 所有的子节点查看.
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5076 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 68ms · UTC 09:34 · PVG 17:34 · LAX 02:34 · JFK 05:34
    ♥ Do have faith in what you're doing.