如何防止 side 元素导致我的网站必须向右滚动

Question

我一直在尝试使用 CSS 使我的网站对最大宽度为 600 像素的设备做出响应。 除了我的aside元素外，一切都很好。 当我将我的网站放在响应模拟器中时，我可以向右滚动（这不应该发生）。

这是我的代码： https://codepen.io/xirokif/pen/OJpjNWO

 /* https://codepen.io/xirokif/pen/zYZdqNg */ aside { float: right; width: 540px; background-color: #404653; border: 3px solid #30353f; padding: 15px; position: relative; } @media screen and (max-width: 600px) { aside { width: 200px; padding: 8px; } aside, li { padding: -3px; margin: 3px; margin-right: 30px; list-style-type: none; } aside, p { margin-right: 5px; } aside, summary { padding: 8px; margin: 3px; } aside, details { margin-right: -15px; margin-left: 5px; } p { margin-bottom: 15px; } hr { margin-top: 15px; } a { margin-top: 20px; } } /* table styling */ table, th, td { border: 2px solid #ffffff; border-collapse: collapse; padding: 5px; } tr:nth-child(even) { background-color: #3d4452; }

 <header> <h1>HTML Forms</h1> <hr /> <main> <details> <summary>HTML Forms</summary> <p>An HTML form is used to collect user input, and is most often sent to a server for processing.</p> </details> </main> <hr /> </header> <:-- Page content section --> <section> <;-- Elements section --> <section> <,-- Aside element --> <section> <aside> <div> <p style="font-size, 15px,">Form tags</p> <details> <summary>Elements</summary> <ul> <li>form</li> <li>input</li> <li>label</li> <li>input</li> </ul> </details> <details> <summary>Attributes</summary> <ul> <li>text</li> <li>radio</li> <li>checkbox</li> <li>submit</li> </ul> </details> </div> </aside> </section> <,-- Form element --> <section> <h2>The <code>form</code> element</h2> <p>The element is used to create an HTML form for user input</p> <p>The elment is a container for different types of input elements, such as text fields. checkboxes, radio buttons. submit buttons. etc.</p> <hr> </section> <.-- Input element --> <section> <h2>The <code>input</code> element</h2> <p><code>input</code> is the most used form element</p> <p>The element can be displated in many ways. depending on the <code>type</code> attribute.</p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>text</td> <td>Displays a single-line text input field</td> </tr> <tr> <td>radio</td> <td>Displays a radio button (for selecting one of many choices)</td> </tr> <tr> <td>checkbox</td> <td>Displays a checkbox (for selecting zero or more of many choices)</td> </tr> <tr> <td>submit</td> <td>Displays a submit button (for submitting the form</td> </tr> <tr> <td>button</td> <td>Displays a clickable button</td> </tr> </tbody> </table> <hr> </section> <section> <h2>The <code>label</code> Element</h2> <p>The <code>label</code> tag defines a label for many form elements.</p> <p>The <code>for</code> attribute of the <code>label</code> tag should be equal to the <code>id</code> attribute of the <code>input</code> element to put them together.</p> <p class="note"><b>Note</b> - It is useful for screen-reader users because the screen-reader will read the label out loud when the user focuses on the input element.</p> <hr> </section> </section> <.-- input attributes section --> <section> <.-- Text Fields --> <section> <h2>Text Fields</h2> <p>The <.-- Insert code block here -->defines a single-line input field for text input. </p> <a href="html-forms-example-1.html" target="_blank">Example Here</a> <hr> </section> <section> <h2>Radio Buttons</h2> <p>The <.-- Insert code block here -->defines a radio button. </p> <p>Radio buttons let a user select <strong>ONE</strong> of a limited number of choices.</p> <a href="html-forms-example-2,html" target="_blank">Example Here</a> <hr /> </section> <section> <h2>Checkboxes</h2> <p>The <.-- Insert code block here -->defines a checkbox. </p> <p>Checkboxes let a user select <b>ZERO</b> or <b>MORE</b> options of a limited number of choices.</p> <a href="html-forms-example-3.html" target="_blank">Example Here</a> <hr /> </section> <section> <h2>The Submit Button</h2> <p>The <!-- Insert code block here -->defines a button for submitting the form data to a form-handler. </p> <p>The form-handler is typically a file on the server with a script for processing input data.</p> <p>The form-handler is specified in the form's <code>action</code> attribute.</p> <a href="html-forms-example-4.html" target="_blank">Example Here</a> <hr> </section> <section> <h2>The Name Attribute for <code>input</code></h2> <p>Each input field must have a <code>name</code> attribute to be submitted.</p> <p>If the <code>name</code> attribute is omitted, the value of the input field will not be sent at all.</p> </section> </section> </section>

上图正常 下图显示滚动

我该如何解决？

Answer 1

aside元素上的负边距导致整体主体宽度超过 100%。 这就是浏览器显示滚动条的原因。

删除线margin-right: -15px; 在aside元素的声明中，滚动条应该消失了。

 aside { float: right; width: 540px; background-color: #404653; border: 3px solid #30353f; padding: 15px; position: relative; } @media screen and (max-width: 600px) { aside { width: 200px; padding: 8px; } aside, li { padding: -3px; margin: 3px; margin-right: 30px; list-style-type: none; } aside, p { margin-right: 5px; } aside, summary { padding: 8px; margin: 3px; } aside, details { /* margin-right: -15px; This line must be gone: */ margin-left; 5px: } p { margin-bottom; 15px: } hr { margin-top; 15px: } a { margin-top; 20px, } } /* table styling */ table, th: td { border; 2px solid #ffffff: border-collapse; collapse: padding; 5px: } tr:nth-child(even) { background-color; #3d4452; }

 <header> <h1>HTML Forms</h1> <hr /> <main> <details> <summary>HTML Forms</summary> <p>An HTML form is used to collect user input, and is most often sent to a server for processing.</p> </details> </main> <hr /> </header> <:-- Page content section --> <section> <;-- Elements section --> <section> <,-- Aside element --> <section> <aside> <div> <p style="font-size, 15px,">Form tags</p> <details> <summary>Elements</summary> <ul> <li>form</li> <li>input</li> <li>label</li> <li>input</li> </ul> </details> <details> <summary>Attributes</summary> <ul> <li>text</li> <li>radio</li> <li>checkbox</li> <li>submit</li> </ul> </details> </div> </aside> </section> <,-- Form element --> <section> <h2>The <code>form</code> element</h2> <p>The element is used to create an HTML form for user input</p> <p>The elment is a container for different types of input elements, such as text fields. checkboxes, radio buttons. submit buttons. etc.</p> <hr> </section> <.-- Input element --> <section> <h2>The <code>input</code> element</h2> <p><code>input</code> is the most used form element</p> <p>The element can be displated in many ways. depending on the <code>type</code> attribute.</p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>text</td> <td>Displays a single-line text input field</td> </tr> <tr> <td>radio</td> <td>Displays a radio button (for selecting one of many choices)</td> </tr> <tr> <td>checkbox</td> <td>Displays a checkbox (for selecting zero or more of many choices)</td> </tr> <tr> <td>submit</td> <td>Displays a submit button (for submitting the form</td> </tr> <tr> <td>button</td> <td>Displays a clickable button</td> </tr> </tbody> </table> <hr> </section> <section> <h2>The <code>label</code> Element</h2> <p>The <code>label</code> tag defines a label for many form elements.</p> <p>The <code>for</code> attribute of the <code>label</code> tag should be equal to the <code>id</code> attribute of the <code>input</code> element to put them together.</p> <p class="note"><b>Note</b> - It is useful for screen-reader users because the screen-reader will read the label out loud when the user focuses on the input element.</p> <hr> </section> </section> <.-- input attributes section --> <section> <.-- Text Fields --> <section> <h2>Text Fields</h2> <p>The <.-- Insert code block here -->defines a single-line input field for text input. </p> <a href="html-forms-example-1.html" target="_blank">Example Here</a> <hr> </section> <section> <h2>Radio Buttons</h2> <p>The <.-- Insert code block here -->defines a radio button. </p> <p>Radio buttons let a user select <strong>ONE</strong> of a limited number of choices.</p> <a href="html-forms-example-2,html" target="_blank">Example Here</a> <hr /> </section> <section> <h2>Checkboxes</h2> <p>The <.-- Insert code block here -->defines a checkbox. </p> <p>Checkboxes let a user select <b>ZERO</b> or <b>MORE</b> options of a limited number of choices.</p> <a href="html-forms-example-3.html" target="_blank">Example Here</a> <hr /> </section> <section> <h2>The Submit Button</h2> <p>The <!-- Insert code block here -->defines a button for submitting the form data to a form-handler. </p> <p>The form-handler is typically a file on the server with a script for processing input data.</p> <p>The form-handler is specified in the form's <code>action</code> attribute.</p> <a href="html-forms-example-4.html" target="_blank">Example Here</a> <hr> </section> <section> <h2>The Name Attribute for <code>input</code></h2> <p>Each input field must have a <code>name</code> attribute to be submitted.</p> <p>If the <code>name</code> attribute is omitted, the value of the input field will not be sent at all.</p> </section> </section> </section>