Проблемы с использованием fieldset с каркасом скелета

Я использую каркас скелета для создания веб-страницы, и я пытаюсь использовать тег fieldset, но по какой-то причине он не создает границу, а созданные мной входы появляются за пределами fieldset почти так, как если бы их плавали влево, а все остальное устанавливалось для очистки. Я просмотрел все скелетные CSS-файлы, но я не могу найти, что заставляет его делать это. Вот код, я добавил:Проблемы с использованием fieldset с каркасом скелета

<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. Здесь вы найдете сброс с помощью поля. Не зная, как вы добавляете входы, я не могу сказать вам, что может или не может повлиять на них.

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

Проблемы с использованием fieldset с каркасом скелета

ответ

Смежные вопросы