Comment rendre du texte sous une zone de texte?

Faire quelque chose comme en html/cssComment rendre du texte sous une zone de texte?

alt text

2010-10-01 soldier.moth

Êtes-vous prêt à accepter tout type de limitations cross-browser? Est-ce qu'il * faut * travailler dans IE 6 ..? –

n'a pas à travailler ie6 –

c'est un soulagement, depuis [ma réponse] (http://stackoverflow.com/questions/3843547/how-can-i-render-text-under-a-textbox/3843599#3843599) ne le fait probablement pas. –

Ceci est similaire à la réponse de @Gus, mais un peu plus sémantique:

<form action="" method="post"> 
    <fieldset> 
    <input type="text" name="day" id="day" /> 
    <label for="day">Day</label> 
    </fieldset> 
    <fieldset> 
    <input type="text" name="hour" id="hour" /> 
    <label for="hour">Hour</label> 
    </fieldset> 
    <fieldset> 
    <input type="text" name="min" id="min" /> 
    <label for="min">Min</label> 
    </fieldset> 
    <fieldset> 
    <input type="text" name="sec" id="sec" /> 
    <label for="sec">Sec</label> 
    </fieldset> 
</form>

Avec le foll CSS grâce:

fieldset { 
    display: inline-block; 
    width: 10em; 
    margin: 0 1em 0 0; 
    border: 1px solid #ccc; 
} 

fieldset > input, 
fieldset > label { 
    display: block; 
    width: 8em; 
    text-align: center; 
    margin: 0 auto; 
}

démo en direct affiché à: jsbin.

Edité pour en faire un juste un peu plus joli ...

Nouveau CSS:

form { 
    width: 49.5em; 
    overflow: hidden; 
    border: 1px solid #ccc; 
} 
fieldset { 
    display: block; 
    float: left; 
    width: 10em; 
    margin: 0 1em 0 0; 
    border: 1px solid #ccc; 
} 
    fieldset:last-child { 
    margin: 0; 
} 

fieldset > input, 
fieldset > label { 
    display: block; 
    text-align: center; 
    margin: 0 auto; 
} 
fieldset > input { 
    width: 80%; 
    font-size: 1.4em; 
}

et révisée démo (encore une fois) à jsbin

Source

2010-10-01 23:14:25

Il est brut, mais vous pouvez ajouter un div en position absolue avec ce texte et le positionner où il est nécessaire. Vous devrez probablement également positionner les zones de texte.

Vous pourriez également être en mesure de s'en tirer avec une marge négative en haut (probablement pas dans IE, cependant).

Source

2010-10-01 23:04:36 JoshD

Vous pouvez faire ce que vous voulez en encapsulant chaque entrée et étiquette dans les éléments div, et en faisant flotter les divs.

Example Here

HTML:

<div class="boxwrap"> 
    <div> 
     <input type="text" size="6" /> 
     <h5>label1</h5> 
    </div> 
    <div> 
     <input type="text" size="6" /> 
     <h5>label2</h5> 
    </div> 
    <div> 
     <input type="text" size="6" /> 
     <h5>label3</h5> 
    </div> 
</div> 
<div class="clearfloat"></div>

CSS:

div.boxwrap div { 
    float: left ; 
} 
div.boxwrap div h5 { 
    text-align: center ; 
} 
div.clearfloat { 
    clear: both ; 
}

Source

2010-10-01 23:09:43 Gus

Je me rends compte que prêter attention aux éléments réels (x) html semble être tombé en panne, mais sérieusement?Il y a plusieurs éléments plus sémantiques facilement disponibles et spécialement conçus pour ce '' par exemple, il fournit un bel événement onClick-focus ainsi qu'une relation sémantique entre les éléments (le 'label' et le 'input') ... Il y en a plus, mais j'ai l'impression que je suis petit. –

Aucun hacking impliqué - devrait être tous les navigateurs amicaux.

<style type="text/css"> 
body { 
    font-family: Arial, Helvetica, sans-serif; 
} 


.date-container { 
    height: 50px; 
    border: solid 1px; 
} 

.input { 
    width: 35px; 
    float: left; 
    margin: 5px; 
} 
.field input { 
    font-size: 12px; 
    margin: 0; 
    width: 35px; 
    text-align: center; 
} 

.name { 
    font-weight: bold; 
    text-transform: capitalize; 
    font-size: 11px; 
    text-align: center; 
} 

</style> 
<div class="date-container"> 
    <div class="input"> 

     <div class="field"> 
      <input type="text" name="day" id="day"> 
     </div> 
     <div class="name"> 
      day 
     </div> 
    </div> 

    <div class="input"> 

     <div class="field"> 
      <input type="text" name="hour" id="hour"> 
     </div> 
     <div class="name"> 
      Min 
     </div> 
    </div> 

    <div class="input"> 
     <div class="field"> 
      <input type="text" name="min" id="min"> 
     </div> 
     <div class="name"> 
      day 
     </div> 
    </div> 

    <div class="input"> 
     <div class="field"> 
      <input type="text" name="sec" id="sec"> 
     </div> 
     <div class="name"> 
      Sec 
     </div> 
    </div> 

</div>

Source

2010-10-01 23:19:26 Glycerine

Voici l'approche la plus sémantique (et cela fonctionne tout le chemin du retour à IE6, pas de soucis):

<html> 
    <head> 
     <title>Title</title> 

     <style type="text/css"> 

      fieldset { 
       border: none; 
       overflow: auto; 
      } 

      label { 
       display: block; 
       float: left; 
       font-family: Arial, Helvetica, sans-serif; 
       font-size: 75%; 
       margin-right: 10px; 
       text-align: center; 
       width: 30px; 
      } 

      input { 
       width: 30px; 
      } 

     </style> 

    </head> 
    <body> 
     <form action="#"> 
      <fieldset> 
       <label> 
        <input type="text" name="day" id="day"> 
        Day 
       </label> 
       <label> 
        <input type="text" name="hour" id="hour"> 
        Hour 
       </label> 
       <label> 
        <input type="text" name="minute" id="minute"> 
        Min 
       </label> 
       <label> 
        <input type="text" name="second" id="second"> 
        Sec 
       </label> 
      </fieldset> 
     </form> 
    </body> 
</html>

Source

2010-10-02 03:54:43 Marcus

Comment rendre du texte sous une zone de texte?

Répondre

Questions connexes