在特定示例中如何強制div留在另一個div中-有解無憂

伙計們，

我有一個帶有選單的 HTML 頁面。在某些時候，我發現如果選單項太長，它們會破壞設計。我想強制選單項留在它們的父 div 內（應該在每個組之間平均分配）。我怎么做？請考慮示例 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
    <style>
        @charset "UTF-8";
        @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
        @import url('https://fonts.googleapis.com/css2?family=Baloo 2&family=Montserrat:wght@500&family=Roboto&display=swap');
        html {
            font-size: 1vw;
            scroll-padding-top: 74px;
        }
        body {
            background-color: #fefefe;
            font-family: "Roboto", helvetica, arial, sans-serif;
            font-size: 1.3rem;
            font-weight: 400;
            text-rendering: optimizeLegibility;
            margin: 5vw;
            margin-top: 1vw;
            padding: 50px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            /*max-width: 1080px;*/
            box-sizing: border-box;
            border-radius: 5px;
        }
        h1,
        h2,
        h3 {
            font-family: "Roboto", helvetica, arial, sans-serif;
            text-shadow: 1px 1px 12px #002233;
            Display: inline;
        }
        h2,
        h3 {
            color: #5c717c;
            font-weight: 100;
        }
        h2 {
            /*font-size: calc(14px   2vw);*/
            font-size: 2rem;
            display: block;
            margin-top: 10px;
            margin-bottom: 5px;
        }
        h3 {
            /*font-size: calc(12px   1vw);*/
            font-size: 1.5rem;
            border: 1px solid #d1d7da;
            margin: 3px;
            display: inline-block;
            border-radius: 5px;
            background: #f8f8f8;
            padding-left: 4px;
            padding-right: 4px;
        }
        .menu-container {
            display: table;
            max-width: 98vw;
            padding: 0.1vw;
            width: 100%;
            border-collapse: separate;
            border-spacing: 10px;
            box-sizing: border-box;
        }
        .firstLevel {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            width: 20%;
            display: table-cell;
            padding: 1vw;
            vertical-align: text-top;
            border-radius: 5px;
            margin: 5px;
            box-sizing: border-box;
        }
        a {
            color: inherit;
            text-decoration: none;
        }
        a:hover {
            text-shadow: 0 0px 8px rgba(255, 60, 0, 1);
        }
    </style>
</head>
<body>
    <!--Here goes menu container-->
    <div class='menu-container'>
        <div class='firstLevel'>
            <h2><a href='#FIRST'>FIRST</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#SECOND'>SECOND</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerttyqwertyqwertyqwerty'>qwerttyqwertyqwertyqwerty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#THIRD'>THIRD</a></h2>
            <h3><a href='#qwerty'>qwerty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#FOURTH'>FOURTH</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwerty</a></h3>
            <h3><a
                    href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwerty</a>
            </h3>
            <h3><a
                    href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwerty</a>
            </h3>
        </div>
    </div>
</body>

</html>

在這里，我有四個組，每個組中有一些子項。我發現如果某些子專案太長 - 它們會破壞設計。我如何強制他們留在他們組的 div 內（通過換行符或縮放？）。

uj5u.com熱心網友回復：

看到希望它有效..

@charset "UTF-8";
        @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
        @import url('https://fonts.googleapis.com/css2?family=Baloo 2&family=Montserrat:wght@500&family=Roboto&display=swap');
        html {
            font-size: 1vw;
            scroll-padding-top: 74px;
        }
        body {
            background-color: #fefefe;
            font-family: "Roboto", helvetica, arial, sans-serif;
            font-size: 1.3rem;
            font-weight: 400;
            text-rendering: optimizeLegibility;
            margin: 5vw;
            margin-top: 1vw;
            padding: 50px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            /*max-width: 1080px;*/
            box-sizing: border-box;
            border-radius: 5px;
        }
        h1,
        h2,
        h3 {
            font-family: "Roboto", helvetica, arial, sans-serif;
            text-shadow: 1px 1px 12px #002233;
            Display: inline;
        }
        h2,
        h3 {
            color: #5c717c;
            font-weight: 100;
        }
        h2 {
            /*font-size: calc(14px   2vw);*/
            font-size: 2rem;
            display: block;
            margin-top: 10px;
            margin-bottom: 5px;
        }
        h3 {
            /*font-size: calc(12px   1vw);*/
            font-size: 1.5rem;
            border: 1px solid #d1d7da;
            margin: 3px;
            display: block;
            border-radius: 5px;
            background: #f8f8f8;
            padding-left: 4px;
            padding-right: 4px;
        }
        .menu-container {
            display: flex;
            max-width: 98vw;
            padding: 0.1vw;
            width: 100%;
            border-collapse: separate;
            border-spacing: 10px;
            box-sizing: border-box;
        }
        .firstLevel {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            width: 20%;
                justify-content: space-evenly;
            padding: 1vw;
            vertical-align: text-top;
            border-radius: 5px;
            margin: 5px;
            box-sizing: border-box;
        }
.firstLevel a{word-break: break-all;}
        a {
            color: inherit;
            text-decoration: none;
            word-break: break-all;
        }
        a:hover {
            text-shadow: 0 0px 8px rgba(255, 60, 0, 1);
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        
    </style>
</head>
<body>
    <!--Here goes menu container-->
    <div class='menu-container'>
        <div class='firstLevel'>
            <h2><a href='#FIRST'>FIRST</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#SECOND'>SECOND</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerttyqwertyqwertyqwerty'>qwerttyqwertyqwertyqwerty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#THIRD'>THIRD</a></h2>
            <h3><a href='#qwerty'>qwerty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#FOURTH'>FOURTH</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwerty</a></h3>
            <h3><a
                    href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwerty</a>
            </h3>
            <h3><a
                    href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwerty</a>
            </h3>
        </div>
    </div>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/453200.html

標籤：html css

上一篇：錨標簽內的媒體屬性有什么用？

下一篇：小盒子出線容器