2010-10-01 1 views
2

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

alt text

+0

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

+0

n'a pas à travailler ie6 –

+0

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. –

Répondre

3

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

2

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).

5

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 ; 
} 
+1

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 '

1

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> 
1

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> 
Questions connexes