Étiquette : box-sizing

[CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur

30/03/2015 /

Solution moderne avec la propriété CSS box-sizing :

Solution obsolète :

Source : Input field and submit button on the same line, full width.

[CSS] Forcer une liste non ordonnée (ul) à se comporter en tableau HTML avec la pseudo-classe nth-child, la propriété box-sizing et la fonction calc

27/05/2014 /

list-table

Nouvelle version :

Autre solution, mieux écrite, exploitant la propriété CSS box-sizing: border-box; : http://jsfiddle.net/frontenddeveloper/795Cc/4/.

Sources :

Prise en charge : IE9+ (IE8+ sans l’utilisation de la fonction calc pour pallier à un bug de largeur sur le dernier élément de la liste).


<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
  <li><a class="link" href="#">01</a></li>
  <li><a class="link" href="#">02</a></li>
  <li>03</li>
  <li>04</li>
  <li><a class="link" href="#">05</a></li>
  <li><a class="link" href="#">06</a></li>
  <li class="current"><strong>07</strong></li>
  <li><a class="link" href="#">08</a></li>    
  <li><a class="link" href="#">09</a></li>
  <li><a class="link" href="#">10</a></li>
  <li><a class="link" href="#">11</a></li>
  <!--li><a class="link" href="#">12</a></li-->    
</ul>



.sizes-list{
  width: 100%;
  float: left;
  margin-bottom: 16px;
}

.sizes-list li{
  float: left;
  text-align: center;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
  clear: left;
}

/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
  clear: none;
}

.sizes-list li{
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-right-width: 0;
  border-style: solid;
  border-color: #e5e5e5;
}

.sizes-list li{
  width: 20%;    
}

.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
  width: calc(20% + 3px);
  border-color: red; 
}

.sizes-list li:nth-child(5n+5):last-child{
  width: 20%;
  border-color: olive;
}

.sizes-list.four-columns-rows li{
  width: 25%;
}

.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: calc(25% + 3px);
  border-color: red;
}

.sizes-list.four-columns-rows li:nth-child(4n+4):last-child{
  width: 25%;
  border-color: olive;
}

/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
  margin-top: -3px;
}

.sizes-list,
.sizes-list a.link{
  color: #50494c;
  text-decoration: none;
}

.sizes-list li.current{
  background-color: #e5e5e5;
}

/*
.sizes-list a.link,
.sizes-list strong{
  display: block;
  padding: 8px 0;
}
*/

.sizes-list li:last-child,
.sizes-list li:nth-child(5n+5),
.sizes-list.four-columns-rows li:nth-child(4n+4),
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child{
  border-right-width: 3px;
}

.sizes-list.four-columns-rows li:nth-child(5n+5){
  border-right-width: 0;
}

Ancienne version :

Test en live : http://jsfiddle.net/frontenddeveloper/As8BQ/.

La liste comportera des cellules à largeurs flexibles (déclarées en pourcentages (%)). Le tableau affiche par défaut 5 colonnes. L’ajout de la classe .four-columns-rows affichera un tableau de 4 colonnes.


<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><strong></strong></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
</ul>



.sizes-list{
  width: 100%;
  float: left;
  margin-bottom: 16px;
}

.sizes-list li{
  float: left;
  text-align: center;
}

/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
  clear: left;
}

/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
  clear: none;
}

.sizes-list li{
  width: 20%;
}

/* [standard 5 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 6ème élément inclus */
.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
  width: 20.97%;
}

/* [4 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li,
.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: 25%;
}

/* [4 colonnes] Si le dernier élément de la liste est l'un des 3 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li:nth-child(-n+3):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: 25.97%;
}

/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
  margin-top: -3px;
}

.sizes-list a.link,
.sizes-list strong{
  display: block;
  padding: 8px 0;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-right-width: 0;
  border-style: solid;
  border-color: #e5e5e5;
}

.sizes-list,
.sizes-list a.link{
  color: #50494c;
  text-decoration: none;
}

.sizes-list strong{
  background-color: #e5e5e5;
}

/*
.sizes-list li:nth-child(5n+1) a.link,
.sizes-list li:nth-child(5n+1) strong,
.sizes-list.four-columns-rows li:nth-child(4n+1) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+1) strong{
  border-left-width: 3px;
}
*/

.sizes-list li:last-child a.link,
.sizes-list li:last-child strong,
.sizes-list li:nth-child(5n+5) a.link,
.sizes-list li:nth-child(5n+5) strong,
.sizes-list.four-columns-rows li:nth-child(4n+4) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+4) strong,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child strong{
  border-right-width: 3px;
}

.sizes-list.four-columns-rows li:nth-child(5n+5) a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5) strong{
  border-right-width: 0;
}