indiquant le nom et l'entrée de la ligne à l'aide de css

J'ai un balisage avec étiquette et inputbox. Cependant, pour des raisons professionnelles, j'ai besoin de lui montrer l'étiquette et inputbox sur sameline et de masquer les placeholdertext. Le résultat final devrait ressembler le texte de l'espace réservé est d'y rester. L'exemple est ici: http://jsfiddle.net/XhwJU/

Voici le balisage de référence:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title> 
</head>
<body>
   <h1> test </h1>
   <div class="inputdata">
      <label for="AccessCode"> Access Code: </label>
      <div style="display:inline"> <input type="text" name="accessCode" id="AccessCode" value=""  placeholder="" /> </div>
      <div class="clear"></div>
   </div>
</body>
</html>

Voici les styles utilisés:

.inputdata {
  border: thin solid gray;
  padding: 0.1em;
  margin: 0.1em;
  vertical-align: middle;
}

div .inputdata label {
  width:auto;
  float:left;
  color: gray;
  line-height: 2;
  padding-top: .4em;
}

input[type='text']{
  overflow:hidden;
  line-height: 2;
  box-shadow: none;
  border:none;
  vertical-align: middle;
  background:none;
  width:100%;
}

.clear {
  clear: both; 
  height: 1px; 
  overflow: hidden; 
  font-size:0pt; 
  margin-top: -1px;
}​

Comme vous pouvez le voir dans le jsfiddle, l'étiquette et l'entrée de montrer dans les lignes distinctes. Je veux l'étiquette et l'entrée à apparaître sur la même ligne, indépendamment de la screenwidth. Étiquette doit avoir une taille fixe qui lui permet de s'adapter contenu dans une ligne et l'entrée doit occuper le reste de la largeur de l'écran.

d'apprécier l'aide

Vérifiez la documentation de l'API. Je l'ai fait pour une application de la mine, mais pour le moment je suis sur mon téléphone et ne peut pas vraiment vous aider. Le tout dans la documentation.
Trouvé. Utilisation <div data-role=” fieldcontain”> autour des éléments que vous voulez en ligne.
jquerymobile.com/test/docs/forms/docs-forms.html regardez sous champ des conteneurs
Le problème avec fieldcontain est-il met de la frontière autour de l'inputbox et se déplace également inputbox à la ligne suivante sur le petit écran. Je veux rester sur le même écran. En outre, je suis en train de mettre de la frontière autour de la div et pas seulement autour de inputbox donc ça donne un sentiment que tout le container est un inputbox
Ouais je viens de lire qu'en vertu de 480px il se casse pour un retour à la ligne. Avez-vous essayé d'utiliser une grille pour aligner les éléments?

OriginalL'auteur Kiran | 2012-06-25

  1. 10

    J'ai fait quelques modifications dans votre CSS et je pense que j'ai obtenu ce que vous voulez, voici un exemple et ci-dessous le code HTML et CSS.

    CSS

    div.inputdata{
    border:thin solid gray;
    padding:0.1em;
    margin:0.1em;
}

div.inputdata label{
    float:left;
    margin-right:10px;
    padding:5px 0;
    color:gray;
}

div.inputdata span{
    display: block;
    overflow: hidden;
}

div.inputdata input{
    width:100%;
    padding-top:8px;
    border:none;
    background:none;
}

.clear {
    clear: both; 
}

    HTML

    <h1>test</h1>
<div class="inputdata">
    <label for="AccessCode"> Access Code: </label>
    <span><input type="text" name="accessCode" id="AccessCode" value=""  placeholder="" /></span>
    <div class="clear"></div>
</div>

    Pour mieux comprendre la raison de overflow:hidden dans span vous pouvez lire ceci: La magie de "overflow:hidden"

    parfait, fonctionne comme un charme..
    Je suis heureux de vous aider!
    Hey, sur la même note, pouvez-vous pls prendre un coup d'oeil à stackoverflow.com/questions/11249888/... ?
    Désolé pour mon retard, j'ai vu votre commentaire tout à l'heure. Je vais jeter un oeil à votre question.
    Absolument parfait pour ce que j'en avais besoin! La réputation++

    OriginalL'auteur Marcio Mazzucato