Czy istnieje vr (reguła pionowa) w html?

Question 1

Wiem, że w html jest hr (reguła pozioma), ale nie wierzę, że istnieje vr (reguła pionowa). Czy się mylę, a jeśli nie, dlaczego nie ma reguły pionowej?

Question 2

Nie, nie ma reguły pionowej.

Nie ma sensu mieć takiego. HTML jest analizowany sekwencyjnie, co oznacza, że układasz kod HTML od góry do dołu, od lewej do prawej, tak jak chcesz, od góry do dołu, od lewej do prawej (ogólnie)

Tag VR nie jest zgodny z tym paradygmatem.

Jest to jednak łatwe do zrobienia za pomocą CSS. Dawny:

<div style="border-left:1px solid #000;height:500px"></div>

Pamiętaj, że musisz określić wysokość lub wypełnić pojemnik zawartością.

Question 3

Możesz utworzyć taką regułę pionową: <hr style="width: 1px; height: 20px; display: inline-block;">

Question 4

Jak podkreślali inni, koncepcja reguły pionowej nie pasuje do pierwotnych pomysłów stojących za strukturą i prezentacją dokumentów HTML. Jednak w dzisiejszych czasach (zwłaszcza w związku z rozprzestrzenianiem się aplikacji internetowych) istnieje niewielka liczba scenariuszy, w których byłoby to rzeczywiście przydatne.

Na przykład, rozważ poziome menu nawigacyjne zamocowane u góry ekranu, podobne do paska menu w większości okienkowych aplikacji GUI. Masz kilka elementów menu najwyższego poziomu ułożonych od lewej do prawej, które po kliknięciu otwierają menu rozwijane. Wiele lat temu powszechną praktyką było tworzenie tego z tabelą jednorzędową, ale jest to zły HTML i powszechnie uznaje się, że właściwą drogą byłaby lista z mocno dostosowanymi arkuszami CSS.

Załóżmy teraz, że chcesz pogrupować podobne elementy, ale dodaj pionowy separator między grupami, aby uzyskać coś takiego:

[Item 1a] [Item 1b] | [Item 2a] [Item 2b]

Używanie <hr style="width: 1px; height: 100%; ..." />działa, ale może zostać uznane za niepoprawne semantycznie, gdy zmieniasz, do czego ten element jest w rzeczywistości. Ponadto nie można tego używać w niektórych elementach, w których HTML DTD dopuszcza tylko elementy wbudowane (np. W elemencie).

Lepszym rozwiązaniem byłoby jednak, ale nie wszystkie przeglądarki obsługują display: inline-block;właściwość CSS, więc jedyną prawdziwą opcją na poziomie liniowym jest użycie takiego obrazu:

<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />

Ma to dodatkową zaletę, że jest kompatybilny z przeglądarkami tekstowymi (takimi jak lynx), ponieważ zamiast obrazu wyświetlany jest znak potoku. (Nadal denerwuje mnie, że M $ IE nieprawidłowo używa tekstu alternatywnego jako podpowiedzi; do tego służy atrybut title!)

Question 5

<hr> wewnątrz display: flex sprawi, że będzie wyświetlany pionowo.

JSFiddle: https://jsfiddle.net/w6y5t1kL/

Przykład:

<div style="display:flex;">
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
  <hr>
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
</div>

Question 6

<style type="text/css">
.vr
{
  display:inline;
  height:100%;
  width:1px;
  border:1px inset;
  margin:5px
}
</style>

<div style="font-size:50px">Vertical Rule: &rarr;<div class="vr"></div>&larr;</div>

Wypróbuj to.

Question 7

Co powiesz na:

writing-mode:tb-rl

Gdzie góra-> dół, prawo-> lewo?

Będziemy do tego potrzebować reguły pionowej.

Question 8

Nie ma, gdzie by to poszło?

Użyj CSS, aby umieścić obramowanie elementu, jeśli chcesz coś takiego.

Question 9

HTML ma niewielkie lub żadne położenie pionowe ze względu na typograficzny charakter układu treści. Reguła pionowa po prostu nie pasuje do jej semantyki.

Question 10

Spróbuj, a poznasz siebie:

<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>

Question 11

możesz to zrobić na 2 sposoby:

stwórz styl jak już dałeś w div, ale zmień border-left na border-right
zrób zdjęcie i zmień jego szerokość na 1-2 piksele

Question 12

Starożytne pytanie, ale rozwiązałem to display:flex;i działa świetnie:

<div style="display:flex;border:1px dotted black;margin-bottom:20px;">
    <div>
        This is a div
    </div>
    <div style="border-left:1px solid black;margin:0 7.5px;"></div>
    <div>
        This is another div
    </div>  
</div>

https://jsfiddle.net/6qfd59vm/3/

To rozwiązanie nie wymaga również stałej wysokości.

Question 13

Spróbuj tego.

Możesz ustawić wysokość i szerokość elementu „ div ”, podobnie jak zakres „ hr ”.

Margines „ hr ” służy do wyrównania.

<div style="display: inline-flex; width: 25px; height: 100px;">
  <hr style="margin: 0px 0px 0px 12.5px;">
</div>

Rozwiń fragment

Question 14

Wiem, że dodaję odpowiedź bardzo późno, ale na pewno warto. Możesz uzyskać pionową linię za pomocą flexihr

Zobacz mój kod tutaj .

Question 15

W kontekście elementu listy używanego jako nawigacja doskonale przydałby się znacznik <vr />. Powodem, dla którego nie istnieje, jest to, że „posiadanie go nie ma logicznego sensu” w kontekście HTML dekadę temu.

Question 16

Aby korzystać z poczty e-mail w formacie HTML dla większości klientów komputerowych, musisz używać tabel. W takim przypadku możesz użyć <hr>tagu z niezbędnym (ale prostym) stylem wbudowanym, takim jak:

<hr width="1" size="50">

Oczywiście styl CSS jest bardziej elastyczny, ale GMail i podobne nie pozwalają na używanie stylów CSS innych niż inline ...

Question 17

Możesz użyć css do symulacji pionowej linii i użyć klasy w div

.vhLine {
  border-left: thick solid #000000;
}

Question 18

Możesz to bardzo łatwo zrobić za pomocą

hr{
 transform: rotate(90deg);
}

<html>
<head>
</head>
<body>
<hr>
</body> 
</html>

Rozwiń fragment

Uważaj na wysokość i szerokość godz

Question 19

Niestandardowe elementy HTML5 (lub czysty CSS)

1. javascript

Zarejestruj swój element.

var vr = document.registerElement('v-r'); // vertical rule please, yes!

* -Obowiązkowe we wszystkich niestandardowych elementach.

2. css

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

* Być może będziesz musiał trochę pograć, display:inline-block|inlineponieważ inlinenie rozszerzy się do wysokości elementu zawierającego. Użyj marginesu, aby wyśrodkować linię w kontenerze.

3. utworzyć instancję

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

* Niestety nie można tworzyć niestandardowych tagów samozamykających.

stosowanie

 <h1>THIS<v-r></v-r>WORKS</h1>

przykład: http://html5.qry.me/vertical-rule

Nie chcesz zadzierać z javascriptem?

Po prostu zastosuj tę klasę CSS do wyznaczonego elementu.

css

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

* Patrz uwagi powyżej.

link do oryginalnej odpowiedzi na SO .

Question 20

Możesz utworzyć taki tag niestandardowy:

<html>
<head>
<style>
vr {
display: inline-block;
// This is where you'd set the ruler color
background-color: black;
// This is where you'd set the ruler width
width: 2px;
//this is where you'd set the spacing between the ruler and surrounding text
margin: 0px 5px 0px 5px;
height: 100%;
vertical-align: top;
}
</style>
</head>
<body>
this is text <vr></vr> more text
</body>
</html>

(Jeśli ktoś zna sposób, w jaki mógłbym zamienić to w tag „otwarty”, na przykład <hr>daj mi znać, a ja go edytuję)

Question 21

W HTML nie ma tagu, ale możesz użyć |.

Question 22

Możesz użyć nowego tagu SVG HTML5:

<svg style="position:absolute;width:100%;height:100%;">
    <line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
    </line>
</svg>

Question 23

Łatwo jest stworzyć obraz linii , a następnie wstawić go do kodu jako „regułę”, ustawiając szerokość i / lub wysokość według potrzeb. To wszystko były obrazy z regułą poziomą, ale nic nie powstrzymuje mnie (lub Ciebie) przed użyciem obrazu z regułą pionową.

Jest to fajne z wielu powodów; możesz łatwo użyć różnych linii, kolorów lub wzorów jako „reguł”, a ponieważ nie miałyby one tekstu, nawet gdybyś zrobił to w „normalny” sposób używając hr w HTML, nie powinno to wpływać na SEO ani inne rzeczy, takie jak że. Plik obrazu powinien być bardzo mały (maksymalnie 1 lub 2 KB).

Question 24

Zbyt wiele zbyt skomplikowanych odpowiedzi. Po prostu utwórz tag TableData, który będzie obejmował liczbę wierszy, które chcesz, używając rowspan. Następnie użyj prawej krawędzi dla rzeczywistego paska.

Przykład:

<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid">&nbsp;</td>
<td rowspan="5">&nbsp;</td>

Upewnij się, że „& nbsp” w drugim wierszu ma taką samą liczbę wierszy jak pierwszy. tak, aby między nimi był odpowiedni odstęp.

Ta technika bardzo mi się przydała podczas pracy z HTML5.

Question 25

Dziś jest to możliwe dzięki CSS3

hr {
  background-color:black;
  color:black;
  -webkit-transform:rotate(90deg);
  position:absolute;
  width:100px;
  height:2px;
  left:100px;
}

Question 26

Dla osób, które próbują tworzyć kolumny dla tekstu, istnieje właściwość reguły kolumny, której należy rozważyć!

.content{
  margin: 20px 5%;
  padding: 5px;
  
}
.content p{
  -webkit-column-count: 3;
  -moz-column-count:3;
  -o-column-count:3;
  column-count: 3; 
  -webkit-column-rule: 1px solid #ccc;
  -moz-column-rule: 1px solid #ccc;
  -o-column-rule: 1px solid #ccc;
  column-rule: 1px solid #ccc;
 
  text-align: justify;
}

<div class="content">
  <p>
    Lorizzle ipsum tellivizzle sit amizzle, consectetizzle adipiscing elit. Nullam away things, shizznit stuff, suscipizzle shiz, gravida vizzle, funky fresh. Doggy phat tortizzle. Check it out its fo rizzle. Bizzle izzle shizzle my nizzle crocodizzle dapibus turpizzle tempizzle i'm in the shizzle. Mauris gizzle nibh et ghetto. Vestibulum ass phat. Pellentesque eleifend nizzle nisi. Fo shizzle my shizz shiznit fo shizzle dizzle. Donec dapibus. That's the shizzle uhuh ... yih! urna, pretium eu, mattizzle cool, shit things, nunc. Fizzle suscipizzle. Shizzlin dizzle semper daahng dawg boofron bow wow wow.



  </p>
  
  
</div>

Rozwiń fragment

Question 27

<div style="width:1px;background-color:red;height:30px;float:right;"></div>

Można to łatwo zrobić za pomocą takiego elementu div

Question 28

Tam nie ma.

Czemu? Prawdopodobnie dlatego, że wystarczy tabela z dwiema kolumnami.

Question 29

Nie, nie ma. Opowiem wam krótką historię, dlaczego tak nie jest. Ale najpierw szybkie rozwiązania:

a) Użyj klasy CSS dla podstawowych elementów span/ divnp . :

.vr{ 
   display: inline-block; 
   vertical-align: middle; 
   /* note that height must be precise, 100% does not work in some major browsers */
   height: 100px; 
   width: 1px; 
   background-color: #000;
}

Demonstracja użycia => https://jsfiddle.net/fe3tasa0/

b) Wykorzystaj obramowanie jednostronne i ewentualnie CSS:first-child selektora , jeśli chcesz zastosować ogólne separatory między elementami rodzeństwa / sąsiada.

Historia o `<vr>` DOPASOWANIU w oryginalnym paradygmacie,
ale wciąż tam nie ma:

Wiele odpowiedzi sugeruje, że pionowy separator nie pasuje do oryginalnego paradygmatu / podejścia HTML ... to jest całkowicie błędne. Również odpowiedzi są bardzo sprzeczne.

Ci sami ludzie są prawdopodobnie nazywając ich jasną klasę CSS „clearfix” - nie ma nic do poprawki o pływających, jesteś po prostu czyszcząc go ... Nie było nawet elementem HTML3: <clear>. Niestety, to i zwolnienie z unoszenia się na wodzie jest jednym z niewielu powszechnych nieporozumień.

Tak czy inaczej. „Wtedy” w „oryginalnych grup wiekowych html”, nie było myśli o czymś, jak inline-blockbyło po prostu blocks, inlinesi tables.

Ta ostatnia jest właściwie powodem, dla którego <vr>nie istnieje.
Wtedy zakładano, że:
Jeśli chcesz podzielić coś w pionie i / lub zrobić więcej bloków od lewej do prawej =>
=> tworzysz / chcesz tworzyć kolumny =>
=> oznacza to, że tworzysz tabelę =>
= > tabele mają naturalne granice między komórkami => nie ma powodu, aby tworzyć<vr>

To podejście jest nadal aktualne, ale jak pokazał czas, składnia stworzona dla tabel nie jest odpowiednia dla każdego przypadku, jak również dla domyślnych stylów.

Innym, prawdopodobnie późniejszym założeniem było to, że jeśli nie tworzysz tabeli, prawdopodobnie masz pływające elementy blokowe . Co oznacza, że są one trzymać razem , i znowu, można ustawić granicę , a te dni prawdopodobnie nawet użyć :first-childprzełącznika zasugerowałem wyżej ...

Czy istnieje vr (reguła pionowa) w html?

Niestandardowe elementy HTML5 (lub czysty CSS)

1. javascript

2. css

3. utworzyć instancję

stosowanie

Nie chcesz zadzierać z javascriptem?

css

Historia o <vr> DOPASOWANIU w oryginalnym paradygmacie, ale wciąż tam nie ma:

Historia o `<vr>` DOPASOWANIU w oryginalnym paradygmacie,
ale wciąż tam nie ma: