HTML字段集有两种传说 - 顶部和底部

我目前使用fieldset和legend画周围的一些输入一个框我有一个形式，看起来是这样的：HTML字段集有两种传说 - 顶部和底部

 
---------Caption--------- 
|      | 
|  inputs   | 
|      | 
|      | 
-------------------------

我很好奇如果有一种方法，把另一个标题（legend）在盒子的底部，像这样：

 
---------Caption1-------- 
|      | 
|  inputs   | 
|      | 
|      | 
--------Caption2---------

只需用另一个legend标签的字段集的底部不工作....

根据定义，

来源

2013-11-14 A.O.

fieldset和legend具有1：1的关系。一个fieldset里面不能有多个legend元素。您可以使用任何其他元素，并使用CSS来设计它的样式，但看起来像是legend。

来源

2013-11-14 18:56:10

因此，为了实现这一点，我不得不使用CSS在沿底部的边框以我的文字的位置，并给它一个背景一样的内容背景，所以你通过文本不会看到边界醒目？这是可以肯定的，但似乎应该有一个更容易/更优雅的解决方案... –

嗯，我不认为这是一个很常见的情况，所以我并不感到惊讶它涉及到一些CSS：Afer所有它应该不超过10左右线... –

我试图达到相同的，非常有用的答案，但你会认为在某些时候会有一种方法来设置字段集上的多个图例 –

按照HTML语法，每个fieldset只能有一个legend元素，如果您尝试使用两个legend元素，则只有第一个元素显示为图例。第二个被视为正常内容。

使用CSS来设计底部图例并不像听起来那么简单，部分原因是IE为其他浏览器（和HTML5 CR）应用了不同的填充fieldset。但下面似乎给在支持CSS的浏览器相当一致的结果：

<style> 
fieldset { position: relative; padding: 0.35em 0.625em 0.75em; } 
.legend2 { position: absolute; bottom: -1.4ex; left: 10px; background: white } 
caption, .legend2 { padding: 0 2px } 
</style> 

<fieldset><legend>Caption <span class=legend2>Caption2</span></legend> 
    Put fields here. 
</fieldset>

来源

2013-11-14 19:26:26

这depreached和哈克。不要使用它

这是不是在顶部和底部，这是在右上角和左上角。它似乎不是交叉浏览器兼容的。

我使用此代码为我的网页：

<style> 
fieldset { margin:0; } 
legend:after { position:absolute;content: attr(secondlegend);left:20px;background: #fff; } 
</style> 

<fieldset><legend secondlegend="Console" align="right"><button>clear</button></legend> 
This is the content<br>of this fieldset 
</fieldset>

我却用它作为与清晰的按钮
所以在第二个传说属性控制台我写的真正传奇

来源

2015-01-14 16:23:30 WuerfelDev

这里的代码很简单，只需复制和粘贴;）不要忘记嵌入Bootstrap

1 - HTML

<div class="fluid-container" id="extraBox"> 
    <div class="row" id="extraBox1"> 
     <div class="col-md-7 col-lg-7" id="extraBox2"> 
      <div class="row" id="extraBox3"> 
       <div class="col-md-6 col-lg-6" id="extraBox4"> 
        <fieldset class="scheduler-border" id="extraBox5"> 
         <legend class="scheduler-border" id="extraBox6"><p id="extraBox7">HANOI GALLERY</p></legend> 
         <div class="control-group row" id="extraBox8">  
          <div class="col-md-12 col-lg-12"> 
           <p id="extraBox15"><span id="extraBox16">Địa chỉ:</span><span id="extraBox17">Số 305 Kim Mã, Phường Giảng Võ,</span><br><span id="extraBox18">Quận Ba Đình, Hà Nội</span></p> 
          </div> 
          <div class="col-md-12 col-lg-12"> 
           <p id="extraBox19"><span id="extraBox20">Điện thoại:</span><span id="extraBox21">043 99 66 666</span></p>        
          </div> 
          <div class="col-md-12 col-lg-12"> 
           <p id="extraBox22"><span id="extraBox23">Hotline:</span><span id="extraBox24">0916 888 666</span></p>  
          </div> 
          <div class="col-md-12 col-lg-12"> 
           <p id="extraBox25"><span id="extraBox26">Email:</span><span id="extraBox27">[email protected]</span></p>  
          </div> 
          <div class="col-md-12 col-lg-12"> 
           <p id="extraBox28"><span id="extraBox29">Website:</span><span id="extraBox30">www.hanoigallery.com</span></p> 
          </div> 
         </div>       
        </fieldset>      
       </div>   
       <div class="col-md-1 col-lg-1" id="extraBox9"> 
       </div>   
       <div class="col-md-5 col-lg-5" id="extraBox10"> 
        <fieldset class="scheduler-border" id="extraBox11"> 
         <legend class="scheduler-border" id="extraBox12"><p id="extraBox14">ĐẶT LỊCH ONLINE</p></legend> 
         <div class="control-group row" id="extraBox13">  
          <div class="col-md-12 col-lg-12"> 
           <p id="extraBox31">Gọi tư vấn & đặt lịch tại đây</p>  
          </div> 
          <div class="col-md-12 col-lg-12"> 
           <p id="extraBox32"><img id="extraBox33" src="images/1900.png" /></p> 
          </div> 
         </div>       
        </fieldset>       
       </div>   
      </div>    
     </div>   
     <div class="col-md-5 col-lg-5"> 

     </div>   
    </div> 
</div>

2 - CSS

 #extraBox{ 
     background-color:#01837b; 
    } 
    #extraBox2{ 
     margin-top: 34px; 
    } 
    #extraBox4{ 
      margin-left: 90px; 
    } 
    #extraBox11,#extraBox5{ border: 1px solid #ffffff !important;}  
    #extraBox7,#extraBox14{ 
     color: #ffffff; 
    } 
    #extraBox16{ 
     color: #ffffff; 
     font-weight: bold; 
    } 
    #extraBox17{ 
     margin-left: 6px; 
     color: #ffffff;   
    } 
    #extraBox18{ 
     margin-left: 58px; 
     color: #ffffff;  
    } 
    #extraBox20{ 
     color: #ffffff; 
     font-weight: bold; 
    } 
    #extraBox21{ 
     margin-left: 6px; 
     color: #ffffff; 
    } 
    #extraBox23{ 
     color: #ffffff; 
     font-weight: bold; 
    } 
    #extraBox24{ 
     margin-left: 6px; 
     color: #ffffff; 
    } 
    #extraBox26{ 
     color: #ffffff; 
     font-weight: bold; 
    } 
    #extraBox27{ 
     margin-left: 6px; 
     color: #ffffff; 
    } 
    #extraBox29{ 
     color: #ffffff; 
     font-weight: bold; 
    } 
    #extraBox30{ 
     margin-left: 6px; 
     color: #ffffff; 
    } 
    #extraBox9{ 
     z-index:100; 
     background-color: #01837b; 
     margin-left: -35px; 
     border-top-style: solid; 
     border-color: #ffffff; 
     border-width: 0.001px; 
     margin-top: 11px; 
     width: 12px; 
    } 
    #extraBox4,#extraBox10{ 
     z-index:1; 
    } 
    #extraBox10{ 
     margin-top: 0px; 
     margin-left: -31px; 
    } 
    #extraBox11,#extraBox5{ border: 1px solid #ffffff !important;} 
    #extraBox7,#extraBox14{ 
     color: #ffffff; 
    } 
    #extraBox31{ 
     color: #ffffff; 
     font-size: 17px; 
    } 
    #extraBox32{ 
     height: 126px; 
    } 
    #extraBox33{ 
     margin-left: -4px; 
     width: 100%; 
     margin-top: 19px;  
    }

来源

2016-03-24 19:45:06

HTML字段集有两种传说 - 顶部和底部

回答

相关问题