Comment puis-je changer l'épaisseur de ma balise <hr>


312

Je souhaite modifier l'épaisseur de ma règle horizontale (<hr> ) en CSS. Je sais que cela peut être fait en HTML comme ça -

<hr size="10">

Mais j'entends dire que cela est déconseillé comme mentionné sur MDN ici . En CSS, j'ai essayé d'utiliser height:1pxmais cela ne change pas l'épaisseur. je veux le<hr> ligne soit 0.5pxépaisse.

J'utilise Firefox 3.6.11 sur Ubuntu


Je le veux vraiment mince, l'utilisateur ne devrait pas le remarquer à moins qu'il ne le recherche spécifiquement. Quoi qu'il en soit essayer ...
Srikar Appalaraju

7
Vous pouvez également essayer de lui
donner

4
Puisque 1px est minimum, vous devriez rendre la ligne gris clair si vous voulez qu'elle soit moins perceptible.
Gert Grenander

2
@MovieYoda: les dimensions peuvent aller en sous-pixels, mais le rendu sera arrondi au pixel le plus proche. C'est comme si l'on s'attendait à ce qu'une valeur entière soit de 1.23784 ... Impossible. Vous pouvez le définir sur ce type de valeur, mais il sera arrondi au nombre entier le plus proche. Théoriquement, vous pouvez rendre des largeurs arrondies à 1/3 de pixel sur les écrans LCD en raison des spécificités technologiques, mais je doute que les navigateurs le fassent également. La dimension de sous-pixel restante ne peut pas être de n'importe quelle couleur car elle est liée à un seul des luminophores RVB.
Robert Koritnik

15
Pas un demi-pixel, un demi-px. La question n'est pas complètement idiote. reddit.com/r/shittyprogramming/comments/20zyea/…
Luke Rehmann

Réponses:


524

Pour plus de cohérence, supprimez toutes les bordures et utilisez la hauteur pour l' <hr>épaisseur. L'ajout d'une couleur d'arrière-plan donnera un style <hr>à la hauteur et à la couleur spécifiées.

Dans votre feuille de style:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Ou en ligne comme vous l'avez:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Une explication plus longue ici


10
pourquoi faites-vous border:none? N'importe quelle raison? La bordure ajoute-t-elle aussi de l'épaisseur?
Srikar Appalaraju

11
Oui, nous voulons utiliser la couleur d'arrière-plan pour afficher la ligne à des fins de cohérence. FF utilise la bordure pour créer le <hr> mais pas. Cela les rendra les mêmes.
Gregg B

2
Oui, j'ai toujours trouvé les balises <hr> inter-navigateurs désagréables. C'est agréable de les faire se comporter correctement.
Gregg B

Ou, si vous avez juste besoin d'une pièce unique, vous pouvez le faire en ligne avec<hr style="border: none; height:1px; color:#333; background-color:#333;">;
Jesse Chisholm

1
Quel âge d'IE pour le repli color?
trysis

53

Rendu sous-pixel dans les navigateurs

Le rendu sous-pixel est délicat. Vous ne pouvez pas réellement vous attendre à ce qu'un moniteur affiche une ligne fine inférieure à un pixel. Mais il est possible de fournir des dimensions sous-pixel. Selon le navigateur, ils les rendent différemment. Consultez ce blog de John Resig à ce sujet.

Fondamentalement, si votre moniteur est un écran LCD et que vous dessinez des lignes verticales, vous pouvez facilement tracer une ligne 1/3 pixel. Si votre fond est blanc, indiquez la couleur de votre ligne #f0f. À l'œil nu, cette ligne mesurera 1/3 de pixel. Bien qu'il soit d'une certaine couleur, si vous agrandissez le moniteur, vous verrez qu'un seul segment du pixel entier (composé de RVB) sera sombre. C'est à peu près la technique utilisée pour les indications de type fin, c'est-à-dire ClearType .

Mais les lignes horizontales ne peuvent atteindre qu'un pixel plein. C'est la limitation technologique des moniteurs LCD. Les CRT étaient encore plus compliqués avec leurs luminophores triangulaires (sauf s'ils étaient du type à grille d'ouverture, c'est-à-dire Sony Trinitron), mais c'est une autre histoire.

Fondamentalement, fournir une dimension sous-pixel et s'attendre à ce qu'elle soit rendue de la même manière que s'attendre à ce qu'une variable entière stocke un nombre de 1,2034759349. Si vous comprenez que cela est impossible, vous devez comprendre que les moniteurs ne sont pas en mesure de restituer les dimensions sous-pixel.

Style sûr de navigateur croisé

Mais la façon dont les règles horizontales fondent se font généralement à l'aide de couleurs. Donc, si votre arrière-plan est par exemple blanc ( #fff), vous pouvez toujours faire votre HR très léger. Comme #eee.

Le style de sécurité croisé pour une règle horizontale très légère serait:

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

Et utilisez un fichier CSS au lieu de styles en ligne. Ils fournissent une définition centrale pour l'ensemble du site et pas seulement un élément particulier. Cela rend la maintenabilité bien meilleure.


8

Je cherchais le moyen le plus court pour dessiner une ligne 1px, car la charge entière de CSS séparé n'est pas la solution la plus rapide ou la plus courte.

Jusqu'à HTML5, le WAS était un moyen plus court pour 1px h: <hr noshade> mais .. L'attribut noshade de <hr> n'est pas pris en charge dans HTML5. Utilisez plutôt CSS. (ni aucun autre attribut utilisé auparavant, comme taille, largeur, alignement ) ...


Maintenant, celui-ci est assez délicat, mais fonctionne bien si la plus simple 1px h est nécessaire:

Variation 1, BLACK hr: (meilleure solution pour le noir)

<hr style="border-bottom: 0px">

Sortie: FF, Opera - noir / Safari - gris foncé


Variation 2, GREY hr (le plus court!):

<hr style="border-top: 0px">

Sortie: Opera - gris foncé / FF - gris / Safari - gris clair


Variation 3, COULEUR au choix:

<hr style="border: none; border-bottom: 1px solid red;">

Sortie: Opera / FF / Safari: 1px rouge.


Je serais ravi, si quelqu'un le teste pour Chrome et IE. Les deux premières variantes sont assez délicates, en particulier. 2ème variation, qui sort le premier NOIR visible 1px.
Muscaria

J'aime cette solution car elle ne code pas en dur les informations de couleur, ce qui peut être utile pour la compatibilité avec le mode sombre. Fonctionne bien sur Chrome.
tresf

6

Je recommanderais de définir le HRlui - même pour être 0pxélevé et d'utiliser sa bordure pour être visible à la place. J'ai remarqué que lorsque vous zoomez et dézoomez (ctrl + molette de la souris), l'épaisseur de HRlui - même change, tandis que lorsque vous définissez la bordure, elle reste toujours la même:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

Je peux voir que dans la dernière version de Chrome, son épaisseur change le long du reste de la page. Pire encore, il peut disparaître si vous effectuez un zoom arrière :(
Pavel Alexeev

5

L'attribut de hauteur a été déprécié en html 5. Ce que je ferais, c'est créer une bordure autour de l'heure et augmenter l'épaisseur de la bordure en tant que telle: hr style = "border: solid 2px black;"


1

J'ai ajouté de l'opacité à la ligne, elle semble donc plus mince:

<hr style="opacity: 0.25">

0

Je crois que la meilleure réalisation pour le style <hr>est la suivante:

hr {
color:#ddd;
background-color:
#ddd; height:1px;
border:none;
max-width:100%;
}

Et le code HTML il suffit d' ajouter: <hr>.


0

Voici une solution pour une ligne noire de 1 pixel sans bordure ni marge

hr {background-color:black; border:none; height:1px; margin:0px;}
  • Testé dans Google Chrome

Je pensais que je voudrais ajouter ceci parce que les autres réponses ne comprenaient pas: margin:0px;.

  • Démo

hr {background-color:black; border:none; height:1px; margin:0px;}
<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>


-4

Je suggère d'utiliser la construction comme

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>

Heheheh :) Jamais vu ça auparavant :)
Prakash Raman
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.