` gebruiken met CSS
Dit is de meest gebruikelijke en flexibele methode. Je maakt een smal `div`-element en stijlt dit als een verticale lijn.
```html
```
* `breedte:1px;` :Maakt de lijn 1 pixel breed. U kunt deze waarde aanpassen.
* `hoogte:100px;` :Stelt de hoogte van de lijn in. Pas dit aan uw behoeften aan. Overweeg het gebruik van percentages (`hoogte:100%;`) om de beschikbare ruimte te vullen.
* `achtergrondkleur:zwart;` :Stelt de kleur van de lijn in. Verander dit in de kleur van uw voorkeur.
* `marge:0 auto;` :Centreert de lijn horizontaal. Dit werkt alleen als de bovenliggende container een gedefinieerde breedte heeft.
Methode 2:gebruik van een `
` tag met CSS (voor een eenvoudig scheidingsteken)
De `
`-tag is ontworpen voor horizontale regels, maar met CSS kun je hem eenvoudig verticaal maken. Dit is het beste voor eenvoudige scheidingstekens.
```html
```
* `breedte:1px;` :Stelt de breedte in (vóór rotatie).
* `hoogte:100px;` :Stelt de hoogte in (vóór rotatie).
* `rand:1px effen zwart;` :definieert de rand van de lijn.
* `transformeren:roteren(90 graden);` :Roteert de lijn 90 graden.
* `transform-oorsprong:midden bovenaan;` :Stelt de rotatieoorsprong in op het midden bovenaan en zorgt ervoor dat deze rond de bovenkant roteert.
Methode 3:Een rand gebruiken op een div
Je kunt ook een verticale lijn maken met behulp van de rand van een div, dit kan flexibeler zijn dan het gebruik van achtergrondkleur.
```html
```
* `rand-links:1px effen zwart;` :Creëert een effen zwarte rand van 1px aan de linkerkant. Je zou `border-right` kunnen gebruiken voor een lijn aan de rechterkant van de div.
Opname in ASP.NET
Normaal gesproken sluit u deze HTML in uw ASP.NET Razor-weergavebestand (.cshtml) in:
```cscherp
@{
// Je andere code...
}
@{
// Meer van jouw code...
}
```
Vergeet niet om de `hoogte` en andere stijleigenschappen aan te passen aan uw specifieke lay-outbehoeften. Voor complexere scenario's of een consistente stijl in uw hele toepassing kunt u overwegen een CSS-klasse te maken en deze op het element toe te passen in plaats van op inline-stijlen. Dit is over het algemeen de voorkeursaanpak voor onderhoudbaarheid. Bijvoorbeeld:
CSS-klassebenadering (aanbevolen):
Je CSS-bestand (bijvoorbeeld `styles.css`):
```css
.verticale lijn {
breedte:1px;
hoogte:100px;
achtergrondkleur:zwart;
marge:0 automatisch;
}
```
Jouw Razor-visie:
```html
```
Deze aanpak is overzichtelijker, gemakkelijker te onderhouden en stelt u in staat de stijl voor meerdere elementen te hergebruiken. Vergeet niet om uw CSS-bestand correct aan uw weergave te koppelen.
