HTMLCSS 这个“店铺”怎么设置成横向排版，为啥我无论怎么设置字体大小都是竖着排版？

img
图上是视频上正确的，但是我代码和他一模一样，敲出来为啥是竖着排版的？

p 和 div 是块元素，必然会换行。
要横向排列可以设置浮动float: left;

或者改成行内元素 display: inline-block;

也可以用伸缩盒flex

浮动float: left;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
header p,header div {
    float: left;
}
</style>
</head>
<body>

<header>
    <div>
        <img src="imgs/back.png" />
    </div>
    <div >
        <p class="options">
            <span>店铺</span>
            <span></span>
        </p>
        <p class="input-wrapper">
            <input type="text" placeholder="搜搜店铺" />
        </p>
    </div>
    <div>取消</div>
</header>
 
</body>
</html>

改成行内元素 display: inline-block;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
header p,header div {
    display: inline-block;
}
</style>
</head>
<body>

<header>
    <div>
        <img src="imgs/back.png" />
    </div>
    <div >
        <p class="options">
            <span>店铺</span>
            <span></span>
        </p>
        <p class="input-wrapper">
            <input type="text" placeholder="搜搜店铺" />
        </p>
    </div>
    <div>取消</div>
</header>
 
</body>
</html>

用伸缩盒flex

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
header , .dp {
    display: flex;
}
</style>
</head>
<body>

<header>
    <div>
        <img src="imgs/back.png" />
    </div>
    <div class="dp">
        <p class="options">
            <span>店铺</span>
            <span></span>
        </p>
        <p class="input-wrapper">
            <input type="text" placeholder="搜搜店铺" />
        </p>
    </div>
    <div>取消</div>
</header>
 
</body>
</html>