Hoe maak je een verticale lijn met HTML?
Antwoord 1, autoriteit 100%
Plaats een <div>rond de opmaak waar u de regel wilt laten verschijnen en gebruik CSS om deze op te maken:
.verticalLine {
border-left: thick solid #ff0000;
}<div class="verticalLine">
some other content
</div>Antwoord 2, autoriteit 43%
U kunt de tag voor de horizontale regel gebruiken om verticale lijnen te maken.
<hr width="1" size="500">Antwoord 3, autoriteit 13%
U kunt een lege <div>gebruiken die precies zo is opgemaakt als u wilt dat de regel eruitziet:
HTML:
<div class="vertical-line"></div>
Met exacte hoogte (overschrijvende stijl in-line):
div.vertical-line{
width: 1px; /* Line width */
background-color: black; /* Line color */
height: 100%; /* Override in-line if you want specific height. */
float: left; /* Causes the line to float to left of content.
You can instead use position:absolute or display:inline-block
if this fits better with your design */
}<div class="vertical-line" style="height: 45px;"></div>Antwoord 4, autoriteit 5%
Je kunt ook een verticale lijn maken met HTML horizontale lijn <hr />
html, body{height: 100%;}
hr.vertical {
width: 0px;
height: 100%;
/* or height in PX */
}<hr class="vertical" />Antwoord 5, autoriteit 4%
Er is geen verticaal equivalent van de <hr>element. Een benadering die u misschien wilt proberen, is het gebruik van een eenvoudige rand links of rechts van wat u scheidt:
#your_col {
border-left: 1px solid black;
}<div id="your_col">
Your content here
</div>Antwoord 6, autoriteit 3%
HTML5 aangepaste elementen(of pure CSS)
1. javascript
Registreer uw element.
var vr = document.registerElement('v-r'); // vertical rule please, yes!
*De -is verplicht in alle aangepaste elementen.
2. css
v-r {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*Misschien moet je wat prutsen met display:inline-block|inlineomdat inlineniet uitbreidt tot de hoogte van het element. Gebruik de marge om de lijn binnen een container te centreren.
3. instantiëren
js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>
*Helaas kunt u geen aangepaste zelfsluitende tags maken.
gebruik
<h1>THIS<v-r></v-r>WORKS</h1>
voorbeeld: http://html5.qry.me/vertical-rule
Wil je niet knoeien met javascript?
Pas deze CSS-klasse eenvoudig toe op het door u aangewezen element.
css
.vr {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*Zie opmerkingen hierboven.
Antwoord 7, autoriteit 2%
Een andere optie is om een afbeelding van 1 pixel te gebruiken en de hoogte in te stellen – met deze optie kun je de afbeelding laten zweven waar je moet zijn.
Niet de meest elegante oplossing.
Antwoord 8
Je kunt een verticale lijn tekenen door simpelweg hoogte / breedte te gebruiken met elk html-element.
#verticle-line {
width: 1px;
min-height: 400px;
background: red;
}<div id="verticle-line"></div>Antwoord 9
Er is geen tag om een verticale lijn in HTML te maken.
-
Methode: U laadt een lijnafbeelding. Vervolgens stel je de stijl in zoals
"height: 100px ; width: 2px" -
Methode: u kunt
<td>-tags gebruiken<td style="border-left: 1px solid red; padding: 5px;"> X </td>
Antwoord 10
Er is een <hr>tag voor horizontale lijn. Het kan ook met CSS worden gebruikt om een horizontale lijn te maken:
.divider{
margin-left: 5px;
margin-right: 5px;
height: 100px;
width: 1px;
background-color: red;
}<hr class="divider">Antwoord 11
U kunt de tag hr (horizontale lijn) gebruiken en deze vervolgens 90 graden draaien met css hieronder
hr {
transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
http://jsfiddle.net/haykaghabekyan/0c969bm6/1/
Antwoord 12
Ik heb een combinatie van de voorgestelde “hr”-code gebruikt, en zo ziet mijn code eruit:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
Ik heb gewoon de waarde van de “linker” pixelwaarde gewijzigd om deze te positioneren. (Ik heb de verticale lijn gebruikt om inhoud op mijn webpagina op een rij te zetten, en daarna heb ik deze verwijderd.)
Antwoord 13
Verticale lijn recht naar de div
<div style="width:50%">
<div style="border-right:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>
Antwoord 14
Om een verticale lijn in het midden van een div te maken, denk ik dat je deze code kunt gebruiken.
De ‘container’ is misschien wel 100% breed, denk ik.
div.container {
width: 400px;
}
div.vertical-line {
border-left: 1px solid #808080;
height: 350px;
margin-left: auto;
margin-right: auto;
width: 1px;
}<div class="container">
<div class="vertical-line"> </div>
</div>Antwoord 15
Waarom gebruikt u niet |, het speciale html-teken voor |
Antwoord 16
Als het uw doel is om verticale lijnen in een container te plaatsen om naast elkaar gelegen onderliggende elementen (kolomelementen) te scheiden, kunt u overwegen de container als volgt te stylen:
.container > *:not(:first-child) {
border-left: solid gray 2px;
}
Dit voegt een linkerrand toe aan alle onderliggende elementen vanaf het 2e kind. Met andere woorden, je krijgt verticale randen tussen aangrenzende kinderen.
>is een onderliggende selector. Het komt overeen met elk kind van de elementen die aan de linkerkant zijn opgegeven.*is een universele selector. Het komt overeen met een element van elk type.:not(:first-child)betekent dat het niet het eerste kind van zijn ouder is.
Browserondersteuning: > * :first-childen :not()
Ik denk dat dit beter is dan een simpele .child-except-first {border-left: ...}regel, omdat het logischer is om de verticale lijnen uit de regels van de container te halen , niet de regels van de verschillende onderliggende elementen.
Of dit beter is dan het gebruik van een geïmproviseerd verticaal regelelement (door een horizontale regel op te maken, enz.), hangt af van uw gebruik, maar dit is in ieder geval een alternatief.
Antwoord 17
Er is nog een benadering mogelijk: SVGgebruiken.
bijv. :
<svg height="210" width="500">
<line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
Pluspunten:
- Je kunt een lijn van elke lengte en richting hebben.
- U kunt de breedte en kleur gemakkelijk specificeren
Nadelen:
- SVG wordt nu ondersteund in de meeste moderne browsers. Maar sommige oude browsers (zoals IE 8 en ouder) ondersteunen het niet.
Antwoord 18
Als je een verticale lijn wilt toevoegen, moet je een uur opmaken.
Als je nu een verticale lijn maakt, verschijnt deze in het midden van de pagina:
<hr style="width:0.5px;height:500px;"/>
Om het nu te plaatsen waar je wilt, kun je deze code gebruiken:
<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>
Dit zal het naar links positioneren, je kunt het omkeren om het naar rechts te positioneren.
Antwoord 19
Draai een <hr>90 graden:
<hr style="width:100px; transform:rotate(90deg);">Antwoord 20
In het Vorige element waarna u de verticale rij wilt toepassen, kunt u CSS instellen …
border-right-width: thin;
border-right-color: black;
border-right-style: solid;
Antwoord 21
Voor een inline-stijl heb ik deze code gebruikt:
<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />
en dat plaatste het direct in het midden.
Antwoord 22
Ik had een inline verticale lijn nodig, dus ik heb een knop misleid om een lijn te worden.
<button type="button" class="v_line">l</button>
.v_line {
width: 0px;
padding: .5em .5px;
background-color: black;
margin: 0px; 4px;
}
Antwoord 23
Ik denk dat het een eenvoudige manier is om niets meer te doen. Je kunt de rand links of rechts wijzigen, afhankelijk van je behoefte
.vertical-line{
border-left:1px solid #000
}<span class="vertical-line"></spanAntwoord 24
Je kunt ook het HTML-symbool|die wordt weergegeven als ‘|’
Antwoord 25
Om de verticale lijn in het midden te centreren, gebruik je:
position: absolute;
left: 50%;