問題 - 優文庫

我使用的框架結構來構建一個網頁，我試圖使用字段集標籤，但無論出於何種原因，它不會產生一個邊界，我創建了輸入顯示的外現場設置就好像它們正在浮動一樣，其他所有設置都清除。我已經瀏覽了所有骨架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>[email protected]</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; 
    }

來源

2014-01-30 Meehee

審查「復位&基礎」在base.css文件的頂部。你會在這裏找到fieldset reset。不知道你是如何加入的投入，我不能告訴你可能會或可能不會影響到他們。

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; }

來源

2014-01-30 08:46:08 Frankenscarf

我在檢查重置時必須跳過fieldset標記。非常感謝！ – Meehee

問題

回答

相關問題