问CSS内容比移动屏幕更宽
EN

Stack Overflow用户

提问于 2021-07-24 11:56:07

回答 1查看 160关注 0票数 3

我的CSS代码在HTML代码中有任何问题。我试图解决这个问题，但什么也没发生，我的内容比移动屏幕更宽。

如果删除<article>的内容并删除<article>，则可能会修复此问题。我很困惑，我该怎么办？请给我密码。

我的截图： 我的html结果图像

代码：

<!DOCTYPE html>
<html lang="id">
    <head>
        <title>Daftar Kerusakan komputer</title>
        <meta charset="UTF-8" />
        <style type="text/css">
            /* Latar belakang halaman */
            body {
                background-color:whitesmoke;
                list-style-position: unset;
            }

            /* Pengaturan margin dan jenis font */
            *, body {
                margin:0px;
                padding: 0px;
                font-family: Helvetica;
                font-size: 16px;
            }
            /* Pengaturan style pada Header */
            header {
                font-family: Arial;
                float: left;
                margin: 0px;
                width: 100%;
                background-color: navy;
            }
            
            /* Untuk navbar */
            header li{
                text-align: center;
                display: block;
                text-decoration: none;
                font-size: 10pt;
                float: left;
                padding: 15px;
                color: white;
            }

            header img {
                float: left;
                margin: 0px;
                padding-top: 10px;
                padding-bottom: 10px;
                padding-left: 25px;
                padding-right: 25px;
            }
            
            /* Untuk navigasi */
            header a, header a:link, header a:hover {
                color: white;
                text-decoration: none;
            }

            /* Artikel */
            article {
                text-align: justify;
                padding: 20px;
                background-color: white;
                border-radius: 20px;
                margin: 25px;
                line-height: 30px;
                float: left;
                width: 60%;
            }

            /* Untuk membesarkan heading 2 */
            article h1 {
                font-size: 28px;
                line-height: 40px;
            }
            article h2 {
                font-size: 24px;
                line-height: 40px;
            }
            article h3 {
                font-size: 20px;
            }
            article nav {
                border-radius: 20px;
                list-style-position: outside;
                background-color: #efefef;
                padding: 20px;
                overflow: hidden;
                white-space: nowrap;
                width: fit-content;
            }
            article ol li, article ul li{
                list-style-position: inside;
            }
            .a ol li {
                font-size: 20px;
                font-weight: bold;
                padding-left: 1.3em;
                text-indent: -1.3em;
            }
            .a ol li p,.a ul li {
                font-size: 16px;
                font-weight: normal;
                text-indent: 0px;
            }
            hr {
                margin-top: 10px;
                margin-bottom: 10px;
            }
            figure figcaption {
                font-style: italic;
                font-size: 12px;
            }
            @media screen and (max-width: 750px) {
                article {
                    width: 100%;
                    float: left;
                }
            }
        </style>
    </head>
    <body>
        <header>
            <nav>
                <a href="">
                    <img src="Img/Dragetech Transparent.png" alt="" height="28px" />
                </a>
                <ul>
                    <li><a href="">Rakit PC</a></li>
                    <li><a href="">Beli Laptop</a></li>
                    <li><a href="">Artikel</a></li>
                    <li><a href="">Bantuan</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <article>
                <h1>Penyebab dan ciri-ciri hardisk rusak serta cara mengatasinya</h1>
                <hr />
                <figure>
                    <img src="https://p4.wallpaperbetter.com/wallpaper/990/869/163/hard-disk-drive-wallpaper-preview.jpg" alt="Gambar hardisk" style="width:100%" />
                    <figcaption>Sumber:</figcaption>
                </figure>
                <nav>
                    <b>Daftar Isi</b>
                    <ol>
                        <li><a href="#s_1">Apa itu hardisk?</a></li>
                        <li><a href="#s_2">Bagaimana Hardisk Bisa Rusak?</a></li>
                        <li><a href="#s_3">Lalu Bagaimana Ciri-ciri Hardisk yang Rusak?</a></li>
                    </ol>
                </nav>
                <section id="s_1">
                    <h2>Apa itu hardisk?</h2>
                    <img src="HTML/Img/pngaaa.com-1076148.png" alt="Gambar Hardisk" width="340" />
                    <p>
                        <span title="Hardisk">Hardisk adalah tempat penyimpanan data yang menggunakan piringan yang bermagnet dan juga merupakan alat penyimpanan data secara mekanis.</span> Hardisk sudah ada sejak tahun 1956. Sebelum adanya hardisk, biasanya data akan disimpan dengan Punch tape, Punch card atau Magnetic Drum. Media penyimpanan dulu memiliki kapasitas penyimpanan yang sangat kecil sekali dan itu juga membutuhkan ruangan yang cukup besar. Namun media penyimpanan sekarang sudah memiliki kapasitasnya besar dan ukurannya sudah kecil Namun tak jarang akan luput terjadinya kerusakan hardisk dan biasanya hardisk yang sudah rusak masih dapat diselamatkan dengan membawanya ke jasa data recovery dengan biaya yang sangat mahal sekali.
                    </p>
                </section>
                <br />
                <section id="s_2">
                    <h2>Bagaimana Hardisk bisa rusak?</h2>
                    <p>
                        Seperti yang kita ketahui, semua barang elekronik apapun termasuk komponen dalamnya juga memiliki batas umurnya. Tak hanya itu saja, barang-barang lain yang mengandalkan peralatan secara mekanik juga memiliki batasan umur.
                    </p>
                    <br />
                    <p>
                        Pasalnya, jika terjadi kerusakkan biasanya akan mengeluarkan suara yang tidak biasa atau kita ssebut dengan <i>Click to death</i>. <i>Click to death</i> adalah kondisi dimana hardisk mengalami kegagalan pada <i>head</i> pembaca/menulis data didalamnya. Gejala ini sangat sering terjadi dan jika dibiarkan, maka akan berakibat fatal yang menyebabkan kehilangan data permanen. Ini biasanya terjadi jika hardisk sering terkena guncangan, terjatuh, ataupun terbanting ke permukaan yang keras. Maka hal ini sama sekali tidak bisa dihindari.
                    </p>
                    <br />
                    <p>
                        Dalam beberapa kasus, hardisk yang terjatuh atau sering terguncang akan menggores <i>platter</i> yang digunakan untuk menyimpan data dan mengakibatkan kehilangan data yang tidak bisa direcovery sama sekali. Hal ini disebabkan karena <i>head</i> telah menyentuh ke permukaan si <i>platter</i> itu tersebut.
                    </p>
                </section>
                <section class="a" id="s_3">
                    <h2>Lalu Bagaimana Ciri-ciri Hardisk yang Rusak?</h2>
                    <p>
                        <ol>
                            <li>
                                Komputer menjadi lebih lambat dari biasanya
                                <br />
                                <img src="https://qph.fs.quoracdn.net/main-qimg-a29f28dbb75398b3d510c37c520939b7" alt="Komputer lambat" width="300" />
                                <p>
                                    Hardisk yang mempunyai beberapa <i>bad sector</i> akan dipindahkan ke <i>spare area</i> dan akan ditandai sebagai <i>bad sector</i>. Namun bila data kamu berada di area <i>bad sector</i>, maka data anda tidak akan langsung hilang, namun data anda akan dipindahkan ke <i>spare area</i> dan berakibat pada penurunan kinerja pada hardisk kamu, karema hardisk akan bekerja keras untuk membaca/menulis data pada spare area yang mengakibatkan komputer anda menjadi lebih lambat. Namun sebelum menganggap bahwa hardisk anda mengalami kerusakkan, bisa coba dengan mengecek <i>disk</i> anda dengan menggunakan <a href="" target="_blank">HDTune</a>.
                                    <ul>
                                        <li>Bila ada <i>sector</i> yang berwarna merah, maka anda siap-siap backup data anda dan menyiapkan uang untuk membeli hardisk baru karena gejala kerusakkan akan bertambah parah dalam beberapa hari kedepan.</li>
                                        <li>Jika semua sektor berwara hijau, maka penyebab komputer lambat bukanlah karena hardisk. Bisa jadi karena <i>overheat</i> pada prosesor, banyak <i>startup program</i>, dan lain sebagainya. Anda bisa melihat artikel berikut ini: <a href="" target="_blank">Penyebab komputer lambat</a></li>
                                    </ul>
                                </p>
                            </li>
                            <li>
                                <i>Disk usage</i> selalu 100% meskipun tidak ada aplikasi yang berjalan
                                <p>
                                    Mungkin kamu mengira kalau kecepatan menulis/
                                </p>
                            </li>
                        </ol>
                    </p>
                </section>
            </article>
        </main>
    </body>
</html>

html

css

回答 1

Stack Overflow用户

发布于 2021-07-24 12:03:24

您应该将代码更改为：

/* Artikel */
        article {
            text-align: justify;
            padding: 20px;
            background-color: white;
            border-radius: 20px;
            margin-top: 25px;
            line-height: 30px;
            float: left;
            width: 60%;
            margin-left:20%;
        }

以及：

@media screen and (max-width: 750px) {
            main {
            }
            article {
                width: 100%;
                float: left;
                padding: 0;
                margin: 10%;
            }
        }

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68509731

复制

相似问题

问CSS内容比移动屏幕更宽
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS内容比移动屏幕更宽EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS内容比移动屏幕更宽
EN