移动端视图布局问题：头部截断、文本溢出及订阅栏错位

问题1：头部(header)和导航栏(nav)截断 #

原因：导航栏的flex布局在小屏幕下未设置换行，ul和搜索框挤在一起导致横向溢出；另外width:100%在块级元素上属于多余设置，反而可能引发不必要的布局计算。

修复：

• 给nav添加flex-wrap: wrap，让内部元素在空间不足时自动换行
• 移除header的width:100%，块级元素默认会占满父容器宽度

问题2：文本溢出容器 #

原因：长文本缺少自动换行规则，图片也未设置响应式宽度，超出容器范围。

修复：

• 给.post p添加word-wrap: break-word，强制长文本换行
• 给图片添加max-width:100%，确保图片不会超出容器宽度

问题3：新闻通讯订阅(newsletter)模块对齐异常 #

原因：form元素默认带有外边距，和容器padding叠加后导致对齐偏移。

修复：

• 给newsletter的form添加margin:0，消除默认间距

完整修复后的CSS代码 #

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden; /* 防止横向滚动 */
}

header {
    background-color: #0047ab;
    color: white;
    text-align: center;
    padding: 20px;
    /* 移除多余的width:100% */
}

nav {
    background-color: #333;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap; /* 新增：允许导航元素换行 */
    gap: 10px; /* 新增：统一控制元素间距，替代margin-left */
}

nav ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0; /* 移除默认margin */
}

nav ul li {
    margin: 0 10px;
}

nav input {
    padding: 5px;
    /* 移除margin-left，改用nav的gap统一控制 */
}

.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
}

.post {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

.post img {
    max-width: 100%; /* 新增：图片响应式 */
    height: auto;
}

.post p {
    word-wrap: break-word; /* 新增：强制文本换行 */
}

.newsletter {
    background-color: #f9f9f9;
    padding: 20px;
    margin: 20px auto;
    text-align: center;
    max-width: 600px;
}

.newsletter form {
    margin: 0; /* 新增：消除form默认margin */
}

.newsletter input[type="email"],
.newsletter input[type="submit"] {
    padding: 10px;
    margin-bottom: 10px;
    width: 100%;
}

完整修复后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Layout Issue</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <h1>Science Simplified</h1>
    <p>Exploring Science, One Post at a Time</p>
</header>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
    <input type="text" id="searchBar" placeholder="Search...">
</nav>

<div class="container">
    <h2>Featured Article</h2>
    <div class="post">
        <img src="https://via.placeholder.com/150" alt="">
        <p>Some text that overflows... Some text that overflows... Some text that overflows... Some text that overflows... Some text that overflows... Some text that overflows... Some text that overflows... Some text that overflows...</p>
    </div>
</div>

<div class="newsletter">
    <h2>Sign Up for Our Newsletter</h2>
    <form>
        <input type="email" placeholder="Email">
        <input type="submit" value="Subscribe">
    </form>
</div>

</body>
</html>

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