Question

这是我的html代码，我想在左上方的一个传奇，在右下角也是一个传奇。所以请提供一些细节，我该怎么做呢或其他任何建议。

HTML

   <fieldset class="first_formclass2">
    <legend class="legend_class2">Company Details</legend>
    <legend class="legend_class3">Company Details</legend>
    <label for="address" class="label_classregistration1">Name:</label>
    <input class="for_namingpadding" type="text" name="name" placeholder="First-name"/>
    <input type="text" name="name" id="name" placeholder="Last-name" />


     <label for="address" class="label_classregistration1">Username:</label>
     <input class="how_how" type="text" name="name" placeholder="John1234" /


    </fieldset>

CSS

     .legend_class1
      {
     padding: 15px 10px;
      border:1px solid #686868;
      color:#000;
      font-size:1.5em;
     text-align:left;
         }

     .legend_class2 {
       padding: 15px 10px;
     border:1px solid #686868;
       color:#000;
      font-size:1.5em;
        text-align:left;
      }

Answer 1

如果我理解正确，这是我的版本

 <fieldset class="first_formclass2">
    <legend class="legend_class2">Company Details</legend>
   <form>
      <legend class="legend_class3">Company Details</legend>
   <label for="address" class="label_classregistration1">Name:</label>
    <input class="for_namingpadding" type="text" name="name" placeholder="First-name"/>
    <input type="text" name="name" id="name" placeholder="Last-name" />


     <label for="address" class="label_classregistration1">Username:</label>
     <input class="how_how" type="text" name="name" placeholder="John1234" /
            </form>

    </fieldset>


.first_formclass2 {
  height: 200px;
  position: relative;
} 
.legend_class1
      {
     padding: 15px 10px;
      border:1px solid #686868;
      color:#000;
      font-size:1.5em;
     text-align:left;
         }

     .legend_class2 {
       padding: 15px 10px;
     border:1px solid #686868;
       color:#000;
      font-size:1.5em;
        text-align:left;
      }
form {
    position: absolute;
  bottom:10px;
  right:10px;
  display:inline-block;
}

CODEPEN

Answer 2

您需要使用CSS position属性。你必须更多地修改你的CSS和HTML。

HTML：

 <fieldset class="first_formclass2">
<legend class="legend_class2">Company Details</legend>
<legend class="legend_class3">Company Details</legend>
<div style="padding-bottom:40px;>
<label for="address" class="label_classregistration1">Name:</label>
<input class="for_namingpadding" type="text" name="name" placeholder="First-name"/>
<input type="text" name="name" id="name" placeholder="Last-name" />


 <label for="address" class="label_classregistration1">Username:</label>
 <input class="how_how" type="text" name="name" placeholder="John1234" /
</div>

</fieldset>

CSS：

 .legend_class2
 {
 padding: 15px 10px;
 border:1px solid #686868;
 color:#000;
 font-size:1.5em;
 text-align:left;
 }

.legend_class3 {
padding: 15px 10px;
border:1px solid #686868;
color:#000;
font-size:1.5em;
text-align:left;
position:absolute;
bottom:-20px;
right:0;
margin-right:20px;
background-color:#fff;
z-index:2;
}
.first_formclass2{position:relative}

DEMO

它可能在一个字段集中有2个图例，一个在左上角和一个第二个在右下角..？

2 个答案: