如何将图例放置在字段集边框之外 [英] How do I place the legend outside the fieldset border
本文介绍了如何将图例放置在字段集边框之外的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我快疯了,试图弄清楚如何使这项工作有效.我希望传说在边界之外.如何在保留图例标签的同时实现这一点?正如您在下面看到的,我尝试使用 span,但它不起作用.
I am going crazy trying to figure out how to make this work. I would like the legend to be outside of the border. How can I make this happen while keeping the legend tag? As you can see below I tried using span but it is not working.
body {
background-color: #996600;
color: black;
}
fieldset {
border: 10px solid #ffffff;
border-radius: 10px;
background-color: #999900;
box-shadow: 10px 10px 5px #888888;
position: relative;
}
legend {
font-size: 20px;
float: left;
}
legend span {
top: 0px;
left: 0px;
position: absolute;
}
input[type=text] {
border: 2px solid black;
border-radius: 10px;
background-color: #cccc80;
}
input[type=button] {
background-color: #996600;
border: 2px solid black;
border-radius: 5px;
color: #c9ae78;
font-weight: bolder;
}
p {
font-size: 12px;
font-style: italic;
}
<form method="post" id="contactForm" action="#">
<fieldset>
<legend><span>Newsletter Signup</span>
</legend>
<p>To sign up for our fabulous campaign of useless information that you will never, ever read, please submit your email address here.</p>
<label for="email" id="emailLabel">Email</label>
<input type="text" id="email" />
<input type="button" name="submit" value="Submit" id="submitButton" />
</fieldset>
</form>
推荐答案
使用 position: absolute
作为您的图例,并在您的 fiedset 上添加一个 margin-top
以进行补偿这个转变:
Use position: absolute
for your legend, and add a margin-top
on your fiedset to compensate this shift:
body {
background-color: #996600;
color: black;
}
fieldset {
border: 10px solid #ffffff;
border-radius: 10px;
background-color: #999900;
box-shadow: 10px 10px 5px #888888;
position: relative;
margin-top: 35px;
}
fieldset legend {
position: absolute;
top: -35px;
left: 10px;
font-size: 20px;
}
input[type=text] {
border: 2px solid black;
border-radius: 10px;
background-color: #cccc80;
}
input[type=button] {
background-color: #996600;
border: 2px solid black;
border-radius: 5px;
color: #c9ae78;
font-weight: bolder;
}
p {
font-size: 12px;
font-style: italic;
}
<form method="post" id="contactForm" action="#">
<fieldset>
<legend>Newsletter Signup</legend>
<p>To sign up for our fabulous campaign of useless information that you will never, ever read, please submit your email address here.</p>
<label for="email" id="emailLabel">Email</label>
<input type="text" id="email" />
<input type="button" name="submit" value="Submit" id="submitButton" />
</fieldset>
</form>
这篇关于如何将图例放置在字段集边框之外的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文