HTML FIELDSET с двумя легендами - верхней и нижней

я в настоящее время с помощью fieldset и legend, чтобы нарисовать прямоугольник вокруг некоторых входов я имею в такой форме, которая выглядит примерно так:HTML FIELDSET с двумя легендами - верхней и нижней

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

Я любопытный если есть способ поставить другую подпись (legend) в нижней части окна, как так:

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

Просто используя другой legend тег в нижней части FIELDSET не работает ....

источник

2013-11-14 A.O.

fieldset и legend имеют отношение 1: 1 по определению. У одного fieldset не должно быть более одного элемента legend. Вы можете использовать любой другой элемент и использовать CSS для его стилизации, чтобы он выглядел как legend.

источник

2013-11-14 18:56:10

так, чтобы достичь этого, я должен использовать CSS, чтобы поместить мой текст через границу по дну, и дать ему фоне такой же, как фоновое содержание, так что вы не увидишь границу, поразившую текст? Это наверняка, но похоже, что для этого должно быть более легкое/более элегантное решение ... –

Ну, я не считаю это очень распространенным явлением, поэтому я не удивлен, что он включает в себя некоторые CSS: Afer все это должно быть не более 10 или около того ... –

Я пытаюсь достичь того же, очень полезного ответа, но вы бы подумали, что в какой-то момент будет возможность установить несколько легенд в наборе полей –

У вас может быть только один элемент legend по fieldset, по синтаксису HTML, и если вы попытаетесь использовать два элемента legend, в качестве легенды будет отображаться только первый. Второй - как нормальный контент.

Использование CSS для создания нижней легенды не так просто, как может показаться, отчасти потому, что IE применяет дополнение для fieldset по-другому от других браузеров (и HTML5 CR). Но следующий, кажется, дает достаточно стабильные результаты на 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 и Hacky. Не используйте его

Это не на верхней и нижней части, он находится на верхнем правом и левом верхнем углу. Кажется, это не совместимо с crossbrowser.

Я использую этот код для моей страницы:

<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 FIELDSET с двумя легендами - верхней и нижней

ответ

Смежные вопросы