Question

我疯狂地试图找出如何使这项工作。我希望传说能够超越边界。如何在保留图例标记的同时实现此目的？正如您在下面看到的，我尝试使用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>

Answer 1

对您的图例使用position: absolute，并在您的fiedset上添加margin-top以补偿此转变：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将以下内容添加到legend：

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

希望这有帮助

Answer 3

您可以使用绝对定位 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

如何将图例放在fieldset边框之外

3 个答案: