Fatal编程技术网
  • html/
  • Html 我如何强制<；a>；及<；p>；元素保持在同一条线上？ img{ 边界：0； 宽度：1%； 身高：1%； 填充：0px 10px 0px 10px； } |

Html 我如何强制<；a>；及<；p>；元素保持在同一条线上？ img{ 边界：0； 宽度：1%； 身高：1%； 填充：0px 10px 0px 10px； } |

html css

Html 我如何强制<；a>；及<；p>；元素保持在同一条线上？ img{ 边界：0； 宽度：1%； 身高：1%； 填充：0px 10px 0px 10px； } |,html,css,Html,Css,我正试图重新创建Homestuck网站（）以获得乐趣，但我不知道如何使顶部的链接保持在同一条线上。我尝试在链接的父div元素上使用style=“white space:nowrap”，但似乎不起作用。使用span标记而不是p标记如何 <!DOCTYPE html> <style> img { border: 0; width: 1%; height: 1%; padding: 0px 10px 0p

我正试图重新创建Homestuck网站（）以获得乐趣，但我不知道如何使顶部的链接保持在同一条线上。我尝试在链接的父div元素上使用
style=“white space:nowrap”
，但似乎不起作用。

使用span标记而不是p标记如何

<!DOCTYPE html>
<style>
    img {
        border: 0;
        width: 1%; 
        height: 1%;
        padding: 0px 10px 0px 10px;
    }
</style>
<html>
    <body style="background-color:grey; text-align:center;">
        <div style="white-space:nowrap;">
            <a style="color:#29ff4a" href="#">HOME</a>
            <img src="https://i.ibb.co/7gT6WLJ/New-Piskel-1-png.png" alt="Candy Corn Emoji">
            <a style="color:#39d5f6" href="#">READ</a>
            <p style="color: white">|</p>
            <a style="color:#39d5f6" href="#">INFO</a>
            <img src="https://i.ibb.co/7gT6WLJ/New-Piskel-1-png.png" alt="Candy Corn Emoji">
        </div>
    </body>
</html>


|

a
、
span
、
img
等都是内联元素。这意味着它们不会占用整个空间，新标记也不会占用新行


p
是块级元素。这意味着
p
标记将占据整个宽度，新段落将从新行开始

这就是这里正在发生的事情
a
不会占据整个宽度，但由于
p
是块级元素，它将从新行开始







<a style="color:#39d5f6" href="#">READ</a>
<span style="color: white">|</span>
<a style="color:#39d5f6" href="#">INFO</a>