Możliwe sposoby:
<pre> ... </pre>
lub
style="white-space:pre"
Coś jeszcze?
Aby wstawić tab space
pomiędzy dwa słowa / zdania, których zwykle używam
 
i  
W przypadkach, w których szerokość / wysokość przestrzeni jest większa,
zwykle używam:
Do poziomej przekładki:
<span style="display:inline-block; width: YOURWIDTH;"></span>
Do elementu dystansowego pionowego:
<span style="display:block; height: YOURHEIGHT;"></span>
Możesz użyć
dla spacji, <
dla <
(mniej niż numer jednostki <
) i >
dla >
(większy niż numer jednostki >
).
Pełna lista znajduje się w encji HTML .
Spróbować  
.
Zgodnie z dokumentacją w Postacie specjalne :
Podmioty charakter
 
i 
oznaczają pl przestrzeń i przestrzeń em odpowiednio, gdzie pl przestrzeń jest o połowę mniejszy punkt i przestrzeń em jest równa wielkości punktowej bieżącej czcionki. W przypadku czcionek o stałej wysokości agent użytkownika może traktować spację jako ekwiwalent znaku spacji, a spację em jako ekwiwalent dwóch znaków spacji.
Lubię używać tego:
W twoim CSS:
.tab {
display:inline-block;
margin-left: 40px;
}
W swoim HTML:
<p>Some Text <span class="tab">Tabbed Text</span></p>
#tab
przez .tab
i id="tab"
przez class="tab"
), ponieważ jeśli użyjemy go więcej niż jeden raz w tym samym dokumencie, możemy mieć niezdefiniowane zachowania. Zobacz na przykład to pytanie .
Typy Spaces
w HTML
Tworzy cztery spacje między tekstem  
Tworzy dwie spacje między tekstem -  
Tworzy regularną przestrzeń między tekstem -
tworzy wąską przestrzeń (podobną do zwykłej przestrzeni, ale niewielka różnica -
"&thinsp";
odstępy między zdaniami - "</br>"
Ten link może ci pomóc. Sprawdź [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]
<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>
Pierwszy wiersz tego akapitu będzie wcięty o około pięć znaków, podobnie jak wcięcie z zakładkami.
Aby uzyskać więcej informacji, zobacz Jak używać HTML i CSS do tworzenia kart i odstępów .
<span style="padding-left:68px;"></span>
Możesz także użyć:
padding-left
padding-right
padding-top
padding-bottom
Idź o krok dalej niż @Ivar i stylizuj mój własny tag niestandardowy w ten sposób ... Dla mnie „karta” jest łatwiejsza do zapamiętania i pisania.
tab {
display: inline-block;
margin-left: 40px;
}
I implementacja HTML ...
<p>Left side of the whitespace<tab>Right side of the whitespace</p>
A mój zrzut ekranu ...
Jeśli prosisz o tabulatory do wyrównania elementów w niektórych liniach, możesz użyć <table>
.
Umieszczenie każdej linii <tr> ... </tr>
. I każdy element wewnątrz tej linii <td> ... </td>
. I oczywiście zawsze możesz kontrolować wypełnienie każdej komórki tabeli, aby dopasować przestrzeń między nimi.
To sprawi, że będą wyrównane i będą ładnie wyglądać :)
Alternatywnie określana jako stała lub twarda spacja, nieprzerwana spacja (NBSP) jest używana w programowaniu i przetwarzaniu tekstu do utworzenia spacji w linii, której nie można przerwać zawijaniem słów.
Dzięki HTML
pozwala tworzyć wiele spacji, które są widoczne na stronie internetowej, a nie tylko w kodzie źródłowym.
Biała przestrzeń? Nie możesz po prostu użyć paddingu? To jest pomysł. W ten sposób możesz dodać „pusty obszar” wokół swojego elementu. Możesz więc użyć następujących tagów CSS:
padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
Możesz użyć tego kodu,  
aby dodać spację w treści HTML. Aby wstawić tabulator, użyj go 5 razy lub więcej.
Sprawdź przykład tutaj: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace
Użyj standardowego CSS tab-size
.
Aby wstawić symbol tabulacji (w przypadku standardowego klawisza tabulacji, przesuń kursor) naciśnij Alt+ 0+ 0+9
.element {
-moz-tab-size: 4;
tab-size: 4;
}
Mój preferowany:
*{-moz-tab-size: 1; tab-size: 1;}
Spójrz na fragment kodu lub szybko znaleziony przykład w rozmiarze tabulacji .
.t1{
-moz-tab-size: 1;
tab-size: 1;
}
.t2{
-moz-tab-size: 2;
tab-size: 2;
}
.t4{
-moz-tab-size: 4;
tab-size: 4;
}
pre {border: 1px dotted;}
<h3>tab = {default} space</h3>
<pre>
one tab text
two tab text
</pre>
<h3>tab = 1 space</h3>
<pre class="t1">
one tab text
two tab text
</pre>
<h3>tab = 2 space</h3>
<pre class="t2">
one tab text
two tab text
</pre>
<h3>tab = 4 space</h3>
<pre class="t4">
one tab text
two tab text
</pre>
To działało dla mnie:
W moim CSS mam:
tab0 { position:absolute;left:25px; }
tab1 { position:absolute;left:50px; }
tab2 { position:absolute;left:75px; }
tab3 { position:absolute;left:100px; }
tab4 { position:absolute;left:125px; }
tab5 { position:absolute;left:150px; }
tab6 { position:absolute;left:175px; }
tab7 { position:absolute;left:200px; }
tab8 { position:absolute;left:225px; }
tab9 { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }
Następnie w HTML używam tylko moich kart:
Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75
odpowiedź user8657661 jest najbliższa moim potrzebom ( ustawiania kilku linii). Nie mogłem jednak sprawić, aby przykładowy kod działał zgodnie z opisem, ale musiałem go zmienić w następujący sposób:
<html>
<head>
<style>
.tab9 {position:absolute;left:150px; }
</style>
</head>
<body>
Dog Food: <span class="tab9"> $30</span><br/>
Milk of Magnesia:<span class="tab9"> $30</span><br/>
Pizza Kit:<span class="tab9"> $5</span><br/>
Mt Dew <span class="tab9"> $1.75</span><br/>
</body>
</html>
Jeśli potrzebujesz wyrównany do prawej numerów można zmienić left:150px
na right:150px
, ale trzeba zmienić liczbę na podstawie szerokości ekranu (jak napisane numery byłoby 150 pikseli od prawej krawędzi ekranu).
Możesz to zrobić poprzez wypełnienie <span style="padding-left: 20px;">
, możesz sprawdzić więcej sposobów tutaj - puste miejsce w html
Oto tekst „Tab” (skopiuj i wklej): „”
Może wyglądać inaczej lub nie być pełną kartą z powodu ograniczeń odpowiedzi tej witryny.
zakładki?&tab;
, ale znalazłem ten mały fragment kodu js na github (w zasadzie znajdź i zamień, aby utworzyć pięć
z rzędu) ... gist.github.com/AustinDizzy/1231e82184bea35c42ad