Rowspan en CSS

Bonjour, je cherche un moyen d'utiliser le rowspan en CSS
parce que je fonctionne avec un table-cell, des <ul> et des <li>

normalement sur un affichage d'écran normal on obtient ceci:


et sur un affichage mobile j'aimerai centrer le "Se connecter" entre les 2 <li>

au cas ou voici mon code:
HTML >

<ul class="login">
	<form method="post" action="connexion.php">
	<li class="inbl"><input type="text" name="pseudo" id="pseudo" value="Login" placeholder="Login"/></li>
	<li class=" inbl"><input type="text" name="passe" id="passe" value="Password" placeholder="Password"/></li>
	<li class="inbl"><input type="submit" value="Se connecter"/></li>
	</form>
</ul>

CSS >

.login{
	background-color:#03F;
	color:#CCC;
	width:100%;
	border-radius:6px;
	padding:5px;
	margin:0;
	display:table;
}
.login>li{
	display:table-cell;
}

Merci de bien vouloir m'aider.

Edit:
j'ai trouver sur le site un moyen de réaliser ce que je veux mais comme c'est une image... impossible de savoir comment il la réaliser:
http://www.alsacreations.com/xmedia/doc/full/table5.PNG
à ce lien: http://www.alsacreations.com/tuto/lire/1525-le-modele-tabulaire-en-css.html
Modifié par borrougagnou (17 Aug 2014 - 12:59)

Bonjour.

Tout d'abord, ton sélecteur ".login>li" ne peut pas fonctionner car tu as mis une balise <form> à l'intérieur de ton <ul> et ton sélecteur ne sélectionne que les enfants directs

Et ensuite, d'après ce qui est marqué sur l'image tu dois seulement mettre le "display:table-cell" sur ton élément qui prend les deux hauteurs (i.e. ton <li> avec le bouton) et mettre tes deux autres <li> en "display:block"

A tester

Tu peut faire simple et sans liste :
(rowspan ou colspan snt specifique aux tableau et ne sont pas transposable en CSS ).

<form method="post" action="connexion.php">
  <p><input type="text" name="pseudo" id="pseudo" value="Login" placeholder="Login"/>
    <input type="text" name="passe" id="passe" value="Password" placeholder="Password"/>
  </p>
  <input type="submit" value="Se connecter"/>
</form>

et pour le css:

form {
  display:table;/* pour qu'elle se retracte sur son contenu, mais inline-block, inline-table ou float peuvent aussi le faire avec des effet de bords differents */
  background:blue;
  padding:0px 5px;
}
input {
  margin:5px  0 ;
  vertical-align:middle;
}
form p {
  display:inline-block;/* se place a coté des autres boites en ligne et peut contenir des éléments formater en block  */
  vertical-align:middle;/* centrage horizontale a coté des autres */
  margin:0;
}
@media (max-width: 800px)  {/* la c'est à toi de décider comment écrire ta mediaquerie */
  form p input{
    display:block;/* et paf , nos 2 inputs passent l'un sur l'autre */
  }
}

demo : http://codepen.io/gc-nomade/pen/HyIcC

Pour le fun et si c'est pour le glisser entre les deux : http://codepen.io/gc-nomade/pen/kLIEf
Modifié par gc-nomade (18 Aug 2014 - 15:56)