` med CSS
Detta är den vanligaste och flexibla metoden. Du skapar ett smalt "div" -element och stilar det för att vara en vertikal linje.
`` `html
`` `
* `bredd:1px;` :Gör linjen 1 pixel bred. Du kan justera detta värde.
* `höjd:100px;` :Ställer in linjens höjd. Justera detta efter dina behov. Överväg att använda procentsatser (`höjd:100%;`) för att det ska fylla det tillgängliga utrymmet.
* `bakgrundsfärg:svart;` :Ställer in linjens färg. Ändra detta till din föredragna färg.
* `marginal:0 auto;` :Centrerar linjen horisontellt. Detta fungerar bara om moderbehållaren har en definierad bredd.
Metod 2:Använd en `
`tag med CSS (för en enkel separator)
``
` -taggen är utformad för horisontella regler, men med CSS kan du enkelt göra den vertikal. Detta är bäst för enkla separatorer.
`` `html
`` `
* `bredd:1px;` :Ställer in bredden (före rotation).
* `höjd:100px;` :Ställer in höjden (före rotation).
* `gräns:1px solid svart;` :Definierar linjens gräns.
* `Transform:rotera (90deg);` :Roterar linjen 90 grader.
* `Transform-origin:Top Center;` :Ställer in rotationsursen till toppcentret och säkerställer att det roterar runt sin topp.
Metod 3:Använda en gräns på en div
Du kan också skapa en vertikal linje med hjälp av gränsen till en div, detta kan vara mer flexibelt än att använda bakgrundsfärg.
`` `html
`` `
* `gräns-vänster:1px solid svart;` :Skapar en 1px solid svart kant till vänster. Du kan använda "gräns-höger" för en linje på höger sida av div.
införlivande i ASP.NET
Du skulle vanligtvis bädda in denna HTML i din ASP.NET Razor View (.cshtml) -fil:
`` `csharp
@{
// Din andra kod ...
}
@{
// Mer av din kod ...
}
`` `
Kom ihåg att justera egenskaperna "höjd" och andra stil för att matcha dina specifika layoutbehov. För mer komplexa scenarier eller konsekvent styling över din applikation kan du överväga att skapa en CSS -klass och tillämpa den på elementet istället för inline -stilar. Detta är i allmänhet den föredragna metoden för underhåll. Till exempel:
CSS -klassstrategi (rekommenderas):
Din CSS -fil (t.ex. `Styles.css`):
`` `CSS
.Vertisk linje {
bredd:1px;
Höjd:100px;
Bakgrundsfärg:svart;
marginal:0 auto;
}
`` `
Din rakkniv:
`` `html
`` `
Detta tillvägagångssätt är renare, lättare att underhålla och gör att du kan återanvända stilen över flera element. Kom ihåg att länka din CSS -fil till din vy korrekt.
