如何将图例放在字段集边界之外

Posted 2023-02-16

【中文标题】如何将图例放在字段集边界之外

【英文标题】：How do I place the legend outside the fieldset border

【发布时间】：2015-07-01 22:16:12

【问题描述】：

我正在疯狂地试图弄清楚如何使这项工作发挥作用。我希望传说在边界之外。在保留图例标签的同时如何实现这一点？正如您在下面看到的，我尝试使用 span 但它不起作用。

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>

【参考方案1】：

您可以使用绝对定位。 html：

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

CSS：

body 
    background-color: #996600;
    color: black;

form  margin-top:30px; 
fieldset 
    border: 10px solid #ffffff;
    border-radius: 10px;
    background-color: #999900;
    box-shadow: 10px 10px 5px #888888;
    position: absolute;


legend 
    font-size: 20px;
    text-align: left;
    position:absolute;
    top:-38px;

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;
   

JSFiddle

【参考方案2】：

将以下内容添加到您的legend：

legend 
    position: absolute;
    top: -1em;
    width: 100%;

希望对你有帮助

【参考方案3】：

使用position: absolute 作为您的图例，并在您的字段集上添加一个margin-top 以补偿这种转变：

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>

【讨论】：

谢谢！我是绝对定位和相对定位，但我想知道上边距有什么不同。

@EllenHarris，如果 zessx 对您的问题的回答令您满意，您应该考虑接受这个答案。