Question

我正在使用骨架框架来构建一个网页，我正在尝试使用fieldset标签，但无论出于何种原因，它都不会创建边框，我创建的输入显示在fieldset之外，几乎就像它们一样在其他一切都被清除的情况下被漂浮。我已经浏览了所有的骨架CSS文件，但我找不到导致它执行此操作的内容。这是我添加的代码：

 <body>

        <header id="header" class="container sixteen columns">
            <h1>Colorama Nursery</h1>
            <h2>Bringing tomorrow's rainbow of color...today!</h2>
        </header>

        <hr>

        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Catalog</a>
            <a href="#">Contact</a>
            <a href="#">Employees</a>
        </nav>

        <hr>

        <div id="intro">
            <h2>Dedicated to bringing you stuff!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, aut, cum, unde dicta atque id ipsam aperiam sint omnis non eligendi iure ea quaerat totam facilis doloribus odit magni cupiditate nam error asperiores consectetur commodi vel modi et laboriosam eaque ipsa aliquid itaque qui nihil dolores quo illum at minus!</p>
        </div>

        <hr>

        <div class="container quad">
            <div class="eight columns block">
                <img src="#" alt="Picture!">
                <h3>Quality</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, eligendi recusandae repellat enim amet explicabo iure debitis magni iusto corporis provident voluptas libero sed repudiandae ipsum tempore pariatur quidem nihil voluptates reprehenderit voluptate optio deleniti nostrum cum adipisci? In, adipisci.</p>
            </div>
            <div class="eight columns block">
                <img src="#" alt="Picture!">
                <h3>Organic</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, eligendi recusandae repellat enim amet explicabo iure debitis magni iusto corporis provident voluptas libero sed repudiandae ipsum tempore pariatur quidem nihil voluptates reprehenderit voluptate optio deleniti nostrum cum adipisci? In, adipisci.</p>
            </div>
        </div>

        <div class="container">
            <div class="eight columns block">
                <img src="#" alt="Picture!">
                <h3>Sustainability</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, eligendi recusandae repellat enim amet explicabo iure debitis magni iusto corporis provident voluptas libero sed repudiandae ipsum tempore pariatur quidem nihil voluptates reprehenderit voluptate optio deleniti nostrum cum adipisci? In, adipisci.</p>
            </div>
            <div class="eight columns block">
                <img src="#" alt="Picture!">
                <h3>Well Being</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, eligendi recusandae repellat enim amet explicabo iure debitis magni iusto corporis provident voluptas libero sed repudiandae ipsum tempore pariatur quidem nihil voluptates reprehenderit voluptate optio deleniti nostrum cum adipisci? In, adipisci.</p>
            </div>
        </div>

        <hr>

        <div class="container">
            <h2>Catalog</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, velit, hic, a maiores corporis quaerat sapiente ipsa harum nesciunt similique vitae quas laudantium earum voluptate quidem commodi autem possimus quis.</p>
            <a href="#">View our catalog</a>
        </div>

        <hr>

        <div class="container">
            <h2>Contact us!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, repudiandae deserunt repellendus quod repellat quia quibusdam nihil incidunt beatae aperiam. </p>
            <ul>
                <li>1025 N. Todd Ave, Azusa CA</li>
                <li>staff@coloramanursery.com</li>
                <li>626-969-3585</li>
                <li>facebook.com/coloramanursery</li>
            </ul>

            <h3>Drop us a quick line</h3>
            <fieldset>
                <legend>Whats up?</legend>
            </fieldset>
        </div>

    </body>

    body{
        margin: auto;

        text-align: center;
    }

    #header{
        width: 100%;
        background-color: rgba(121, 205, 77, .3) ;
        background-image: url('../images/jpgs/header.jpg');
        padding: 90px 0px;
        background-size: cover;
    }

    #intro{
        border: 1px black solid;
        margin: 50px;
        padding: 30px;
    }

    .block{
        background-color: lightgreen;
        display: inline-block;
        margin: 15px;
        border-radius: 20px;
    }

    a{
        margin: 5px 20px;
    }

Answer 1

回顾'重置＆amp;基础知识'在base.css文件的顶部。你会在这里找到字段集重置。在不知道你如何添加输入的情况下，我无法告诉你可能会或可能不会影响它们。

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline; }

使用带有框架框架的fieldset的问题

1 个答案: