Hoe maak je een verticale lijn met HTML?
Antwoord 1, Autoriteit 100%
Zet een <div>ROND DE MARKUP WANNEER JE DE LIJN WILT OM TE VERLINATEN OM TE VERLENEN EN GEBRUIK CSS om het te stylen:
.verticalLine {
border-left: thick solid #ff0000;
}<div class="verticalLine">
some other content
</div>Antwoord 2, Autoriteit 43%
U kunt het horizontale regellabel gebruiken om verticale lijnen te maken.
<hr width="1" size="500">Antwoord 3, Autoriteit 13%
U kunt een lege <div>die precies zoals u wilt laten zien die de regel verschijnt:
HTML:
<div class="vertical-line"></div>
Met exacte hoogte (overschrijvingsstijl 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%
U kunt ook een verticale lijn maken met behulp van 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 aan de <hr>-element. Eén benadering die u misschien wilt proberen, is om een eenvoudige rand links of rechts van wat u scheidt te gebruiken:
#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 naar 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 HR (Horizontal Line) -tag gebruiken en dan 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 combinatie van de “HR” -code gebruikt en hier ziet mijn code eruit:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
Ik heb eenvoudig de waarde van de pixelwaarde “links” gewijzigd om deze te positioneren. (Ik heb de verticale lijn gebruikt om inhoud op te lijnen op mijn webpagina en vervolgens heb ik het verwijderd.)
Antwoord 13
verticale lijn recht op 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 te maken die gecentreerd is in een div, 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 liggende 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
U kunt ook de HTML-symbool |DIE RENDERS AS ‘|’
Antwoord 25
Om de verticale lijn in het middengebruik te centreren:
position: absolute;
left: 50%;