我正在使用骨架框架构建网页，我正在尝试使用 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;
}
最佳答案
查看 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; }
关于html - 将字段集与骨架框架一起使用的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21450439/