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字段集有兩種傳說 - 頂部和底部

回答

相關問題