个人练习电影站CSS链接独占整行无法同行排列问题求助

问题根源 #

你设置a标签为inline/inline-block没有生效，本质是你忽略了a标签的父级元素本身是块级元素：

• 你header里的a标签被<h1>包裹，h1默认是块级元素，天生占满整行宽度，哪怕内部a标签内容很窄，h1也会把整行占住，导致其他元素没法和它并列
• 如果是其他区域的元素要同行排列，优先用flex布局比手动调整display属性更稳定，不容易出现排版错乱

具体修复步骤 #

1. 头部导航区域要加多个元素并列的修改方法 #

比如你要在VASMOVIES标题旁边加其他链接/按钮，直接给父容器.div1加flex布局即可，同时重置h1的默认边距和块级独占特性：

.div1 {
    width: 70%;
    background-color: #333;
    border: 2px solid gray;
    border-radius: 5px;
    margin: auto;
    /* 新增以下flex属性 */
    display: flex;
    align-items: center; /* 垂直居中内部元素 */
    justify-content: flex-start; /* 内部元素从左到右排列 */
    padding: 0 15px;
}
.div1 h1 {
    margin: 10px 0; /* 重置h1默认的上下外边距，避免div1被撑太高 */
    margin-right: 30px; /* 给标题和右侧其他元素留间距 */
}

之后你直接在.div1容器里h1标签后面加其他a标签/元素，都会自动和标题同行排列。

2. 通用的同行排列方案 #

任何需要多个元素同行的父容器，都可以加flex布局，比如你要调整其他区域的元素排版，只需要给父容器加：

.父容器类名 {
    display: flex;
    align-items: center; /* 可选：垂直居中内部元素 */
    gap: 20px; /* 可选：给内部元素之间统一加间距，不用单独写margin */
}

3. 补充你代码里其他需要修正的小问题 #

• 你footer里的Contact按钮包裹的a标签没有闭合，会导致样式异常，修改为：<button class="button"><a href="emailpage.html">Contact me</a></button>
• 你.search-box的CSS里transfor拼写错误，应为transform: translate(-50%, -50%);，同时你写了left:35%配合translate的话可以改成left:50%让搜索框完全居中

4. 如果非要用inline/inline-block实现的注意事项 #

如果不用flex，需要确保所有要同行排列的元素的父级，以及这些元素本身，都不是独占整行的块级元素，比如：

• 把h1的display改成inline-block：.div1 h1 { display: inline-block; }
• 所有要和h1并列的元素也要设为inline/inline-block
• 还要手动调整vertical-align对齐，否则元素会上下错位，不如flex布局省心

内容的提问来源于stack exchange，提问作者Vaske