` avec CSS
Il s’agit de la méthode la plus courante et la plus flexible. Vous créez un élément « div » étroit et vous le stylisez pour qu'il soit une ligne verticale.
```html
```
* `largeur :1px;` :Rend la ligne d'une largeur de 1 pixel. Vous pouvez ajuster cette valeur.
* `hauteur :100 px ;` :Définit la hauteur de la ligne. Ajustez cela à vos besoins. Pensez à utiliser des pourcentages (« hauteur :100 %; ») pour qu'il remplisse l'espace disponible.
* `couleur de fond :noir ;` :Définit la couleur de la ligne. Changez-le pour votre couleur préférée.
* `marge :0 auto;` :Centre la ligne horizontalement. Cela ne fonctionne que si le conteneur parent a une largeur définie.
Méthode 2 :Utiliser un `
`balise avec CSS (pour un simple séparateur)
Le ' La balise
` est conçue pour les règles horizontales, mais avec CSS, vous pouvez facilement la rendre verticale. C'est mieux pour les séparateurs simples.
```html
```
* `largeur :1px;` :Définit la largeur (avant rotation).
* `hauteur :100 px ;` :Définit la hauteur (avant rotation).
* `bordure :1px noir uni ;` :Définit la bordure de la ligne.
* `transformation :rotation(90deg);` :fait pivoter la ligne de 90 degrés.
* `transform-origin :en haut au centre ;` :Définit l'origine de la rotation en haut au centre, en veillant à ce qu'elle tourne autour de son sommet.
Méthode 3 :Utiliser une bordure sur un div
Vous pouvez également créer une ligne verticale en utilisant la bordure d'un div, cela peut être plus flexible que d'utiliser la couleur d'arrière-plan.
```html
```
* `border-left :1px noir uni ;` :Crée une bordure noire unie de 1 px sur la gauche. Vous pouvez utiliser « border-right » pour une ligne sur le côté droit du div.
Intégration dans ASP.NET
Vous intégrerez généralement ce code HTML dans votre fichier de vue ASP.NET Razor (.cshtml) :
```csharp
@{
// Votre autre code...
}
@{
// Plus de votre code...
}
```
N'oubliez pas d'ajuster la « hauteur » et les autres propriétés de style pour répondre à vos besoins spécifiques en matière de mise en page. Pour des scénarios plus complexes ou un style cohérent dans votre application, envisagez de créer une classe CSS et de l'appliquer à l'élément au lieu des styles en ligne. Il s’agit généralement de l’approche privilégiée pour la maintenabilité. Par exemple:
Approche de classe CSS (recommandée) :
Votre fichier CSS (par exemple, `styles.css`) :
```css
.ligne verticale {
largeur :1px;
hauteur :100px;
couleur de fond :noir ;
marge :0 automatique;
}
```
Votre vue Razor :
```html
```
Cette approche est plus propre, plus facile à maintenir et vous permet de réutiliser le style sur plusieurs éléments. N'oubliez pas de lier correctement votre fichier CSS à votre vue.
